Dowe

NAVIGATION

Tabs

Tabs keep related content in one place while letting people move between focused panels.

PANEL NAVIGATION

Direct tab entries

Tabs accepts only direct tab entries. Each entry has a unique id, a visible label, and one or more view nodes for its panel. The first entry starts active.

The tab list wraps its controls instead of stretching across the panel. If a horizontal list becomes wider than its container, it stays bounded and scrolls.

Project overview

Keep the essential summary in the first, immediately available panel.

Tabs variant:"pills" scheme:"primary" position:"top"
  tab id:"overview" label:"Overview"
    Text size:"sm"
      "Project summary"
  tab id:"activity" label:"Activity"
    Text size:"sm"
      "Recent changes"
  tab id:"settings" label:"Settings"
    Text size:"sm"
      "Account controls"

VISUAL OPTIONS

Five tab treatments

Variant changes the tab list treatment without changing panel behavior or keyboard navigation.

Solid

The active tab uses a filled treatment.

Outlined

A border keeps the tab list distinct.

Line

A bottom line emphasizes the active destination without outlining the control.

Ghost

A quiet option for low-emphasis navigation.

Pills

Rounded controls separate each destination.

ORIENTATION

Place controls around the panel

top and bottom use a horizontal tab list. start and end place a vertical list beside the panel on every generated target.

Bottom

The controls follow the active panel.

Start

A vertical list appears before the panel.

End

A vertical list appears after the panel.

Tabs variant:"outlined" scheme:"muted" position:"start"
  tab id:"profile" label:"Profile"
    Text size:"sm"
      "Personal information"
  tab id:"security" label:"Security"
    Text size:"sm"
      "Password and access controls"

SCHEMES

Use scheme for the visual family

Tabs uses scheme, not color. Action and structural scheme families work consistently across web, desktop, Android, and iOS.

Primary panel

Success panel

Warning panel

Surface panel

Tabs rejects color as a visual-family prop. Use scheme to select the semantic or structural family.

ACCESSIBILITY

Keyboard-ready panels

Web and desktop output uses tablist, tab, and tabpanel roles. Arrow keys move through the tab controls, while Home and End move to the first and last control.

Android and iOS generate native stateful controls with the same initial active tab, orientation, variant, and scheme.

Authoring rules

Do not place ordinary view nodes directly inside Tabs. Put each panel node under a tab, keep ids unique within that Tabs instance, and give every tab a label and content.

API

Tabs props

Tabs also accepts applicable common identity, spacing, sizing, visibility, radius, and border props.

Prop	Type	Default
No data There are no records to display

tab entry props

tab is structural and is valid only as a direct child of Tabs.

Prop	Type	Behavior
No data There are no records to display

No data

No data