Vertical Tabs

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

Import & use

import { Nav7 } from "@/components/beste/piece/nav7";

<Nav7
  tabs={[
    {
      "label": "Notifications",
      "icon": "bell"
    },
    {
      "label": "Billing",
      "icon": "card"
    },
    {
      "label": "Security",
      "icon": "shield"
    },
    {
      "label": "Preferences",
      "icon": "settings"
    }
  ]}
  activeIndex={1}
/>

More Nav pieces

View all Nav

Workspace

Admin

Sidebar Nav

Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.

Icon Tabs

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

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.

Enclosed Tabs

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

Pill Tabs

Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.