AppBarSplit
v1.0.7Updated 27 Aug 2026Two-row admin top bar — a dark utility row (brand, growing global search, notifications, company switcher, avatar) over a light section-tab row.
Preview
Live · 4 storiesTwo-row adminOpen ↗
▸Why this is recommendedheaderappbartopbaradmin+6
AppBarSplit — two row admin.
Recommended for+14
- ✓Classic ERP/admin shells with global search + section tabs
- ✓Products needing a company switcher in the header
- ✓Two-row layouts separating utilities from section nav
Tags+6
headerappbartopbaradmintwo-rowshellnavigationerptworow
Features+4
- Two rows: dark utility row + light section-tab row
- Growing centered global search
- Right utilities: notifications, company switcher, avatar menu
- Data-driven, SSR-safe, keyboard-accessible, className + data-slot passthrough
Not recommended for−2
- ✕Compact single-row headers (use AppBar or AppBarTabs)
- ✕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
—onSearchOpens the global search
—companyCurrent company (+ companies switcher)
—tabsSecond-row section strip
—userAvatar dropdown menu
—stickyPosition sticky top-0 z-40 (default true)
—