All components

NAVIGATION / COMPONENTS

Tab bar

Keep a small set of destinations close.

Live component4 documented props

About tab bar

The Tab Bar component makes it easy to explore and switch between groups of content that are related and at the same level of hierarchy.

01

Anatomy

Shared parts, named consistently.

  1. 1
    Left Scroll ButtonRequired

    Scrolls hidden tabs to right by one tab width.

  2. 2
    Border

    An optional border around component.

  3. 3
    Tab DividerRequired

    Visual separator between tabs.

  4. 4
    Tab TextRequired

    Describes the content within the tab.

  5. 5
    Tab Icon

    Optional icon to add more information to a tab.

  6. 6
    Right Scroll ButtonRequired

    Scrolls hidden tabs to left by one tab width.

  7. 7
    Active Tab IndicatorRequired

    Indicates which tab is currently active.

  8. 8
    Tabs ContainerRequired

    Container for tabs where `width` is set via className prop and all overflow is `hidden`.

Try the default

A working example with the shared V1 visual language.

Home view selected.

When to use

Use a few stable destinations with familiar icons and visible labels. Maintain the same order across views.

Arrow keys select views; Tab moves into the selected content. Selection is exposed through tab semantics.

Related components

Header

Orient people at the top of an experience.

Footer

Provide useful context at the end.

Sidebar

Make the workspace structure visible.

Breadcrumbs

Show location within a hierarchy.

Source & adaptation

V1 semantic colors, DM Sans typography, compact controls, and responsive layouts. The API table describes this implementation; source design notes may use earlier API terminology.

components/library/navigation.tsx