AppBarPills
v1.0.17Updated 19 Oct 2026Modern SaaS light top bar with a centered segmented-pill nav (active pill filled), brand, and a right cluster (+New, avatar).
Preview
Live · 6 storiesSegmented pillsOpen ↗
▸Why this is recommendedheaderappbartopbarpills+5
AppBarPills — segmented pills.
Recommended for+14
- ✓Modern SaaS product headers
- ✓A small set of top-level sections shown as segmented pills
- ✓Light-surface app shells with a prominent +New action
Tags+6
headerappbartopbarpillssegmentedshellnavigationsaaslight
Features+4
- Centered segmented-pill nav (rounded-full group, active pill filled)
- Right cluster: +New (split) + avatar menu
- Light bg-background surface with bottom border
- Data-driven, SSR-safe, keyboard-accessible, className + data-slot passthrough
- Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
Not recommended for−2
- ✕Many sections or dropdown menus (use AppBar)
- ✕Primary vertical navigation (use Sidebar)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
brandLogo chip + wordmark
—tabsSegmented-pill nav items
—newAction+New button (plain or split menu)
—userAvatar dropdown menu
—stickyPosition sticky top-0 z-40 (default true)
—linkComponentThe host app link component for the brand and every section pill that has an href. MCP feedback fb_bf7dc63a.
—