TabBar
Top-of-page tab navigation — Items: IList<TabDefinition>, Selected (Href), SelectedChanged
Interactive-mode
Examples
URL-based (selection by href)
Programmatic selection
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| TabBar | Horizontal tab navigation. Active state is driven by the Selected parameter (Href match). When SelectedChanged is wired, each tab is a <button> that fires the callback on click; otherwise tabs render as <a href> for URL-based routing. |
| TabDefinition | Record describing one tab. |
TabBar
Horizontal tab navigation. Active state is driven by the Selected parameter (Href match). When SelectedChanged is wired, each tab is a <button> that fires the callback on click; otherwise tabs render as <a href> for URL-based routing.
| Property | Type | Required | Description |
|---|---|---|---|
| Items | IList<TabDefinition>? | Sequential tabs to render. | |
| Selected | string? | Href of the active tab. Drives the active-state visual. | |
| SelectedChanged | EventCallback<string> | Fires with the clicked tab's Href when set. When wired, tabs render as buttons (programmatic selection); otherwise they render as anchors (URL routing). | |
| Borders | bool | Toggles border-b border-border on the bottom of the row. Default: true. | |
| Gutters | bool | Toggles px-4 gap-6 on the row. Default: true. |
TabDefinition
Record describing one tab.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Visible tab label. | |
| Href | string | Tab href. Also used for active-state matching against Selected. | |
| IconSvg | string? | Optional leading icon (SVG path string from IconSvg). | |
| Badge | string? | Optional trailing badge label. |