Tabs
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Tabs />
When to Use
- Switch between different views or categories within the same context.
- Organize related content like account settings, security, and notifications.
- Reduce page length by showing one content section at a time.
Account
Make changes to your account here. Click save when you're done.
Your call has been confirmed.
2 min ago
You have a new message!
1 hour ago
Subscription expiring soon.
3 hours ago
Report ready to download.
2 days ago
Account
Manage your account settings.
Account settings content goes here.
Overview content goes here. View a summary of your data.
Type something in the input, switch tabs and come back. With RenderMode="Tabs.TabsRenderMode.Lazy" the text survives — the panel stays mounted (hidden) once visited. The default Active mode would lose it.
Your name
A sliding underline follows the active tab.
Pick a value to see it applied live.
Content for Alpha.
Pick a value to see it applied live.
Overview content.
Pick a value to see it applied live. With Lazy, type in the input, switch tabs, come back — the text survives.
Your name
On a touch device, swipe left/right on the panel area to switch tabs. SwipeWrap="false" (default) stops at the first and last tab.
Swipe left to go to Beta.
Drag to reorder
Set TabsList.Reorderable="true"
to let users drag tab triggers into a new order. The library handles the drag UX (pointer events, drag image,
drop indicator) but does not mutate the underlying collection — it raises
OnReorder with a
TabsReorderEventArgs
(FromIndex,
ToIndex,
MovedTabValue) and expects
the consumer to update their own list. This keeps your model the single source of truth and means you can
persist the new order, reject the move, or animate it however you like.
If you skip the handler the tabs visually snap back to their original positions — there is no fallback in-place mutation. Reordering is keyboard accessible: focus a trigger and use Ctrl+Shift+Left/Right (or Up/Down in vertical orientation).
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowLeft | Moves focus to the previous tab trigger (horizontal orientation). |
| ArrowRight | Moves focus to the next tab trigger (horizontal orientation). |
| ArrowUp | Moves focus to the previous tab trigger (vertical orientation). |
| ArrowDown | Moves focus to the next tab trigger (vertical orientation). |
| Home | Moves focus to the first tab trigger. |
| End | Moves focus to the last tab trigger. |
API Reference
Tabs
| Property | Type | Default | Description |
|---|---|---|---|
| ActiveValue | string | "" | The value of the currently active tab. Use with @bind-ActiveValue for two-way binding. |
| ActiveValueChanged | EventCallback<string> | — | Callback invoked when the active tab changes. |
| Orientation | Lumeo.Orientation | Horizontal | Layout direction of the tabs. Values: Lumeo.Orientation.Horizontal, Lumeo.Orientation.Vertical. |
| AnimatedIndicator | bool | false | When true (horizontal only), renders a sliding underline that animates between active triggers. Requires one JS measurement per tab change. |
| Variant | Tabs.TabsVariant | Default | Visual style of the list/triggers. Values: Tabs.TabsVariant.Default, Card, Pill. |
| RenderMode | TabsRenderMode | Active | When each panel is rendered and whether its state survives a tab switch. Active (default) — only the active panel is in the DOM; switching away unmounts it (form input, scroll, component state lost). Lazy — a panel renders on first activation and stays mounted (hidden) afterwards. Eager — all panels render immediately; inactive ones hidden. Values: Tabs.TabsRenderMode.Active / Lazy / Eager. |
| SwipeEnabled | bool | false | When true, a horizontal pointer drag (>50 px horizontal, <30 px vertical) on any TabsContent panel switches to the next or previous tab. Vertical scroll is unaffected (touch-action: pan-y). Swipes that start on an interactive element (button, input, textarea, contenteditable) are ignored. |
| SwipeWrap | bool | false | When true and SwipeEnabled is active, swiping past the last tab wraps around to the first (and vice-versa). Default false stops at the boundaries. |
TabsTrigger
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string | "" | The value this tab trigger activates. Must match the Value of the corresponding TabsContent. Required. |
| Disabled | bool | false | Disables the trigger so it cannot be selected. |
| IconContent | RenderFragment? | null | Slot rendered before the trigger label (icon). |
| TrailingContent | RenderFragment? | null | Slot rendered after the trigger label (badge, counter, etc.). |
| IsClosable | bool | false | Shows a close affordance; invokes OnClose when clicked. |
| OnClose | EventCallback | — | Invoked when a closable trigger's close button is clicked. |
TabsContent
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string | "" | The value of this tab panel. Must match the Value of the corresponding TabsTrigger. Required. |
| ForceMount | bool | false | Always render this panel into the DOM (hidden when inactive), regardless of the parent RenderMode. Use for a single panel whose state must survive every switch — e.g. a half-filled form — while the rest of the set stays on the lighter default mode. |
TabsList
| Property | Type | Default | Description |
|---|---|---|---|
| Scrollable | bool | false | Enables horizontal scrolling when triggers overflow. |
| TrailingContent | RenderFragment? | null | Content rendered after the last trigger (e.g., actions or filters). |
Related Components
- Accordion — Use when multiple sections can be expanded at once in a vertical layout.
- NavigationMenu — Use for top-level site navigation rather than in-page content switching.
- ToggleGroup — A segmented control for switching between a small set of views.