Tabs: Blazor tabs component

Examples

Variants

Box (default), Border and Lift map to tabs-box, tabs-border and tabs-lift.

The Box variant, as daisyUI tabs-box.

The Border variant, as daisyUI tabs-border.

The Lift variant, as daisyUI tabs-lift.

website/Examples/Navigation/TabsVariantsExample.razor Source

Binding and disabled

Bind ActiveIndex to switch tabs from code; a Disabled tab cannot be selected.

1,284 active users · 99.98% uptime

ActiveIndex = 0

website/Examples/Navigation/TabsBindingExample.razor Source

Sizes

Size maps to tabs-sm, tabs-md and tabs-lg.

website/Examples/Navigation/TabsSizesExample.razor Source

Icons and counts

TitleContent renders an icon or a count badge in the tab button; Title then becomes its aria-label.

Ana Silva, Tom Becker and 10 others are waiting for approval.

website/Examples/Navigation/TabsTitleContentExample.razor Source

API

<Tabs>

DaisyBlazor

Parameters

ActiveIndex int
= 0
Zero-based index of the currently active tab.
AriaLabel string
= null
Accessible name of the role="tablist" (other attributes go to the outer container).
AriaLabelledBy string
= null
Id of the element that labels the role="tablist".
Size Size
= Size.Medium
Size of the tab buttons.
Variant TabsVariant
= TabsVariant.Box
Visual style of the tab strip (Box, Border, or Lift).
Class string
= null
Extra CSS classes merged onto the outer w-full container.
Style string
= null
Inline CSS style applied to the outer container.

Name	Type	Default	Description
ActiveIndex	int	0	Zero-based index of the currently active tab.
AriaLabel	string	null	Accessible name of the role="tablist" (other attributes go to the outer container).
AriaLabelledBy	string	null	Id of the element that labels the role="tablist".
Size	Size	Size.Medium	Size of the tab buttons.
Variant	TabsVariant	TabsVariant.Box	Visual style of the tab strip (Box, Border, or Lift).
Class	string	null	Extra CSS classes merged onto the outer w-full container.
Style	string	null	Inline CSS style applied to the outer container.

Events

ActiveIndexChanged EventCallback<int>
Raised when the active index changes.

Name	Type	Description
ActiveIndexChanged	EventCallback<int>	Raised when the active index changes.

Content

ChildContent RenderFragment
The tab definitions (one or more Tab components).

Name	Type	Description
ChildContent	RenderFragment	The tab definitions (one or more Tab components).

<Tab>

DaisyBlazor

Parameters

Disabled bool
= false
When true the tab button is rendered as disabled and is not selectable.
Title string
= ""
Text label shown in the tab button. When TitleContent is set, it becomes the button's aria-label instead (so include anything screen readers should hear, e.g. a count).
Class string
= null
Extra CSS classes merged onto this tab's button.
Style string
= null
Inline CSS style applied to this tab's button.

Name	Type	Default	Description
Disabled	bool	false	When true the tab button is rendered as disabled and is not selectable.
Title	string	""	Text label shown in the tab button. When TitleContent is set, it becomes the button's aria-label instead (so include anything screen readers should hear, e.g. a count).
Class	string	null	Extra CSS classes merged onto this tab's button.
Style	string	null	Inline CSS style applied to this tab's button.

Content

ChildContent RenderFragment
Content displayed in the tab panel when this tab is active.
TitleContent RenderFragment
Rich tab button content (icon, count badge...) rendered in place of Title.

Name	Type	Description
ChildContent	RenderFragment	Content displayed in the tab panel when this tab is active.
TitleContent	RenderFragment	Rich tab button content (icon, count badge...) rendered in place of Title.

From MudTabs

Tabs keeps MudTabs's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.