Underline Tabs

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

Import & use

import { Nav4 } from "@/components/beste/piece/nav4";

<Nav4
  tabs={[
    "Overview",
    "Analytics",
    "Audience",
    "Settings"
  ]}
  activeIndex={1}
/>

More Nav pieces

View all Nav

Enclosed Tabs

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

Counted Tabs

Underline tabs that print a pill count next to the label, with the active count filled in primary.

Vertical Tabs

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

Pill Tabs

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

Bottom Nav

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

On this page

Anchor Nav

Docs-style on-this-page list with left borders and a primary active rail on the current section.