AppBarTabs
v1.0.15Updated 19 Oct 2026Flat text-tab top bar (Slack / Notion) — brand, a scrollable row of flat nav links with an active underline, and a compact right cluster (search, notifications, avatar). Dark surface.
Preview
Live · 7 storiesFlat tabsOpen ↗
▸Why this is recommendedheaderappbartopbartabs+5
AppBarTabs organised into tabs — flat.
Recommended for+14
- ✓Simple top nav with a handful of flat sections
- ✓Slack/Notion-style workspace headers
- ✓Products that do not need dropdown menus or a module pill
Tags+6
headerappbartopbartabsshellnavigationslacknotionflat
Features+4
- Scrollable flat text-tab strip with active underline
- Compact right cluster: search icon, notifications, avatar menu
- Dark bg-sidebar surface; responsive hidden-scrollbar overflow
- 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
- ✕Deep section 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
—tabsFlat text nav items
—onSearchRenders a search icon button
—notificationsNotifications bell + count
—userAvatar dropdown menu
—stickyPosition sticky top-0 z-40 (default true)
—linkComponentThe host app link component for the brand and every section tab that has an href. MCP feedback fb_bf7dc63a.
—