TopBar — Design System

Use cases

Segmented app header above every page — logo + home segment + back link + bell on the left, profile + "What's new" + Logout on the right.
The persistent global chrome that doesn't change between pages.

When NOT to use

For a sticky page heading → use TitleBar.
For a mobile bottom navigation bar → use a dedicated mobile-nav primitive (planned).

Web: full-featured header with Logo, parallelogram-shaped home/back buttons, 60px height, and tokenized dark/light styling. Native: simplified horizontal bar with start/center/end slots. TopBarHomeButton omitted (parallelogram is CSS-only). TopBarProfile shows avatar only. All other sub-components ported.

Anatomy

┌────────────────────────────────────────────────────────────────┐
│ [☰] [logo] [home] [back] [bell] ·············  [end slot]   │
└────────────────────────────────────────────────────────────────┘
   ↑                                                  ↑
   start slot (hamburger visible on mobile + tablet)  end slot

The component has no built-in routing — three slots (start / center / end) accept whatever composition you need. Use TopBarLogo for the brand mark so the header stays tied to the shared Logo primitive.

Composition

start — optional TopBarMenuButton (mobile/tablet hamburger), TopBarLogo, optional TopBarHomeButton, optional TopBarBackLink, notification bell. The slot uses no gap so the segments sit flush.
center — optional middle slot. Hidden on < md to keep the mobile bar compact.
end — profile + utility links. Items have gap-3 md:gap-6.
TopBarDivider — thin vertical separator. Visible on lg+ by default; pass className to override.

Mobile + tablet — `TopBarMenuButton`

TopBarMenuButton is a hamburger trigger themed to the TopBar's surface. It is visible up to 1023px and hidden at desktop widths (≥1024px) via lg:hidden, so the start slot always carries a way to reach navigation on small screens — without the parallelogram segments fighting for space.

Pair it with MainSidebar's controlled mobile state to drive the sidebar's Sheet overlay from the header:

const [navOpen, setNavOpen] = useState(false);
 
<TopBar
  start={
    <>
      <TopBarMenuButton onClick={() => setNavOpen(true)} />
      <TopBarLogo />
      <TopBarHomeButton icon={<HomeIcon />} />
    </>
  }
/>
 
<MainSidebar
  mobile
  mobileOpen={navOpen}
  onMobileOpenChange={setNavOpen}
  items={tree}
/>

When mobileOpen is supplied, MainSidebar's built-in hamburger is suppressed so you don't render two of them. Without mobileOpen, the sidebar still renders its own hamburger and manages open state internally — TopBarMenuButton becomes optional.

Height and surfaces

60 px desktop, auto mobile.
The default appearance="system" follows the app .dark class. Use appearance="light" or appearance="dark" only when the header is rendered in an isolated preview or shell that must force a specific surface.
The surface uses MiHCM TopBar component tokens (topbar-light-* / topbar-dark-*), not raw colour values. Override with tokenized Tailwind classes through className when a product shell needs a lighter or flatter treatment.
Do not build forced dark TopBar surfaces from brand-neutral-* primitives directly; those ramps intentionally invert in .dark.
In dark mode, the TopBar uses the same dark-system ramp as the rest of the app shell: background, foreground, muted text, and border tokens stay visually consistent. The back-to-main segment uses topbar-dark-segment, which maps to subdued accent-800 orange for AA contrast with topbar-dark-foreground.
TopBarLogo renders the Logo primitive by default and also accepts src for approved downloaded logo assets.

Configurable sections

The docs configurator lets you independently enable or disable the logo, home segment, back-to-main segment, notification bell, profile name, avatar, support/headphone action, extra action icons, What's new, and Logout. For additional product actions, keep using TopBarAction inside the end slot with dividers where needed.

TitleBar — page-level heading below the TopBar.
Sidebar — vertical navigation alongside the content area.
PageShell — layout wrapper that positions TopBar, sidebar, and content.
Breadcrumb — navigation breadcrumb placed inside the TopBar start slot.