Tab Bar Pill

About this piece

Tab Bar Pill

Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.

Usage

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

import { Nav32 } from "@/components/beste/piece/nav32";

<Nav32
  active="alerts"
  alerts={3}
/>

More Nav pieces

View all Nav

Pill Tabs

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

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.

Counted Tabs

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

Bottom Nav

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

Vertical Tabs

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

App Bar

Web-app bottom bar with five labeled icon tabs and a primary indicator above the active one.