AppBarSplit
v1.0.14Updated 19 Oct 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 stories▸Why this is recommendedheaderappbartopbaradmin+6
AppBarSplit — two row admin.
- ✓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
- 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
- ✕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
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)
—labelsOverride any built-in UI string (i18n). Keys: accountMenu, searchPlaceholder, switchCompany, notifications, notificationsUnread. English defaults ship verbatim; notificationsUnread takes a {count} token filled with the locale-formatted unread number; searchPlaceholder loses to the searchPlaceholder prop. MCP feedback fb_aae65135.
—