Icon Tabs

About this piece

Icon Tabs

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.

Usage

The import and the props worth knowing about, in one place.

import { Nav12 } from "@/components/beste/piece/nav12";

<Nav12
  tabs={[
    {
      "label": "Preview",
      "icon": "preview"
    },
    {
      "label": "Code",
      "icon": "code"
    },
    {
      "label": "Readme",
      "icon": "docs"
    },
    {
      "label": "Settings",
      "icon": "settings"
    }
  ]}
  activeIndex={0}
/>

More Nav pieces

View all Nav

Vertical Tabs

Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.

Enclosed Tabs

Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.

12 open projects, 3 due this week

Sliding Tabs

Segmented tab bar whose active pill glides from tab to tab on a timer while the summary line beneath cross-fades to match.

Icon Breadcrumb

Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.

Bottom Nav

Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.

Underline Tabs

Horizontal tabs with a thin bottom rail and a primary underline under the active label.