Sliding Tabs

12 open projects, 3 due this week

About this piece

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.

Usage

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

import { Nav34 } from "@/components/beste/piece/nav34";

<Nav34
  tabs={[
    {
      "label": "Overview",
      "content": "12 open projects, 3 due this week"
    },
    {
      "label": "Activity",
      "content": "Björk commented on Mixdown v3"
    },
    {
      "label": "Settings",
      "content": "Two-factor auth is on for 8 of 9 members"
    },
    {
      "label": "Billing",
      "content": "Next invoice: $1,240 on 1 Oct"
    }
  ]}
/>

More Nav pieces

View all Nav

Pill Tabs

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

Tab Bar Pill

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

Underline Tabs

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

Vertical Tabs

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

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.