Bottom Nav

About this piece

Bottom Nav

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

Usage

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

import { Nav19 } from "@/components/beste/piece/nav19";

<Nav19
  tabs={[
    {
      "label": "Home",
      "icon": "home",
      "active": true
    },
    {
      "label": "Search",
      "icon": "search"
    },
    {
      "label": "",
      "icon": "plus"
    },
    {
      "label": "Inbox",
      "icon": "bell",
      "badge": 3
    },
    {
      "label": "Profile",
      "icon": "user"
    }
  ]}
/>

More Nav pieces

View all Nav

App Bar

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

Vertical Tabs

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

Underline Tabs

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

Workspace
Admin

Sidebar Nav

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

Tab Bar Pill

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

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.