Tab bar

TabBar is for navigating between sections of a page — Settings tabs, profile-page sections, content-filter tabs. For switching content in-place inside a single panel, use SegmentedControl.

<TabBar items={...} variant="tab" />

<SegmentedControl items={...} />

<Breadcrumb items={...} />

Use it for

• Settings page sub-section navigation
• Profile page sections (Overview / Activity / Connections)
• Content filter tabs (All / Active / Archived)
• Any flat sibling-section navigation where each tab corresponds to a distinct view

Import

import { TabBar } from '@brikdesigns/bds';

Variants

text

Plain text links with brand color for the active tab; no indicator. Use in tight headers where an underline would crowd.

<TabBar
  variant="text"
  items={[
    { label: 'Overview', active: true, onClick: () => setTab('overview') },
    { label: 'Billing', onClick: () => setTab('billing') },
    { label: 'Security', onClick: () => setTab('security') },
  ]}
/>

text-underline

The text variant plus a per-tab brand-color underline below the active tab. Use when the active tab needs a clearer marker than color alone.

<TabBar variant="text-underline" items={items} />

tab

Bottom-border bar with a neutral active color and a brand-color underline. The classic app-navigation tab strip.

<TabBar variant="tab" items={items} />

box

Filled background for active, bordered for inactive. Use for content filters where the active state needs strong visual weight.

<TabBar variant="box" items={items} />

On-color

onColor switches text and border colors to on-color-dark tokens for legibility against brand or dark surfaces.

<TabBar variant="text" onColor items={items} />

Disabled tabs

Set disabled: true on individual items.

<TabBar items={[
  { label: 'Overview', active: true },
  { label: 'Billing' },
  { label: 'Security', disabled: true },
]} />

When not to use

• Don't use TabBar for in-panel content switching. Use SegmentedControl — different visual treatment, different navigation model.
• Don't use TabBar for hierarchical navigation. Use Breadcrumb.
• Don't put more than ~6 tabs in a row. Long tab strips wrap awkwardly. Switch to SidebarNavigation for vertical nav with more items.

Accessibility

• Renders a <div role="tablist"> with each tab as <button role="tab">.
• Active tab carries aria-selected="true".
• Tabs are reachable with Tab; Enter / Space activate. Arrow-key roving between tabs is not yet implemented — tracked as source work.
• Disabled tabs use the native disabled attribute, which removes them from the tab order.

API

Plus standard <div> HTML attributes.

TabItem

interface TabItem {
  label: string;
  active?: boolean;
  disabled?: boolean;
  onClick?: () => void;
  /** Decorative indicator dot after the label — `true` for the brand dot, or a DotStatus to color it. */
  dot?: boolean | DotStatus;
}

Related

• SegmentedControl — in-panel content switcher
• Breadcrumb — hierarchical position
• SidebarNavigation — vertical nav for many items
• Storybook playground