# Tabs

Source: https://lumeo.nativ.sh/components/tabs

# Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Default

Account Password

### Account

Make changes to your account here. Click save when you're done.

Name

Username

Save changes

Preview Code

Notifications

All Unread Archived

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

Preview Code

Vertical Tabs

Account Security Notifications

### Account

Manage your account settings.

Account settings content goes here.

Preview Code

Simple

Overview Analytics Reports

Overview content goes here. View a summary of your data.

Preview Code

Render mode — preserving panel state

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.

Form Preview Settings

Your name

Preview Code

Sliding Indicator

Home Search Library Settings

A sliding underline follows the active tab.

Preview Code

Variant — interactive

Pick a value to see it applied live.

DefaultCardPill

Alpha Beta Gamma

Content for Alpha.

Preview Code

Orientation — interactive

Pick a value to see it applied live.

HorizontalVertical

Overview Analytics Reports

Overview content.

Preview Code

RenderMode — interactive

Pick a value to see it applied live. With `Lazy`, type in the input, switch tabs, come back — the text survives.

ActiveLazyEager

Form Preview Settings

Your name

Preview Code

Swipe (Mobile)

On a touch device, swipe left/right on the panel area to switch tabs. `SwipeWrap="false"` (default) stops at the first and last tab.

Alpha Beta Gamma

Swipe left to go to Beta.

**Mobile (rc.49).** Tab triggers now have a minimum 44×44 px touch target area so they are easy to tap on mobile without accidentally activating an adjacent tab.

## 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.

Preview Code

Drag to reorder

OverviewMetricsSettings

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](/components/accordion) — Use when multiple sections can be expanded at once in a vertical layout.
-   [NavigationMenu](/components/navigation-menu) — Use for top-level site navigation rather than in-page content switching.
-   [ToggleGroup](/components/toggle-group) — A segmented control for switching between a small set of views.