Steps: Blazor steps component

Examples

Derive Completed and Active from your current step; the markers update as you move.

website/Examples/Navigation/StepsWizardExample.razor Source

Color sets step-success, step-error and so on; DataContent swaps the number for a symbol.

website/Examples/Navigation/StepsColorsExample.razor Source

Vertical stacks the steps in a column, handy in narrow side panels.

website/Examples/Navigation/StepsVerticalExample.razor Source

DaisyBlazor

Vertical bool
= false
When true, renders the steps vertically (adds the steps-vertical class). When false (default) the steps are rendered horizontally (steps-horizontal).
Class string
= null
Extra CSS classes added to the steps list.
Style string
= null
Inline styles applied to the steps list.

Name	Type	Default	Description
Vertical	bool	false	When true, renders the steps vertically (adds the steps-vertical class). When false (default) the steps are rendered horizontally (steps-horizontal).
Class	string	null	Extra CSS classes added to the steps list.
Style	string	null	Inline styles applied to the steps list.

ChildContent RenderFragment
Child Step elements to render inside the steps list.

Name	Type	Description
ChildContent	RenderFragment	Child Step elements to render inside the steps list.

DaisyBlazor

Active bool
= false
Convenience shortcut: marks the step as the currently active step. Applies the same step-primary as Completed (daisyUI only colours the connector between same-colour steps, so the progress line reaches the current step) but keeps the numeric marker, and sets aria-current="step".
Color Color
= Color.Default
Semantic color applied to the step marker (e.g. Color.Primary adds step-primary). Defaults to Color.Default (no color modifier).
Completed bool
= false
Convenience shortcut: marks the step as completed by applying step-primary when no explicit Color is set, and a check-mark marker when no DataContent is set.
DataContent string
= null
Custom marker content placed in the data-content attribute. Use a single character or symbol (e.g. "✓", "?", "!"). When null the step uses its default numeric counter.
Class string
= null
Extra CSS classes added to the step item.
Style string
= null
Inline CSS style applied to the step item.

Name	Type	Default	Description
Active	bool	false	Convenience shortcut: marks the step as the currently active step. Applies the same step-primary as Completed (daisyUI only colours the connector between same-colour steps, so the progress line reaches the current step) but keeps the numeric marker, and sets aria-current="step".
Color	Color	Color.Default	Semantic color applied to the step marker (e.g. Color.Primary adds step-primary). Defaults to Color.Default (no color modifier).
Completed	bool	false	Convenience shortcut: marks the step as completed by applying step-primary when no explicit Color is set, and a check-mark marker when no DataContent is set.
DataContent	string	null	Custom marker content placed in the data-content attribute. Use a single character or symbol (e.g. "✓", "?", "!"). When null the step uses its default numeric counter.
Class	string	null	Extra CSS classes added to the step item.
Style	string	null	Inline CSS style applied to the step item.

Name	Type	Description
ChildContent	RenderFragment	Label text or markup rendered inside the step item.