Topbar

The rail's other half: a sticky bar across the content column carrying where you are on the left, and on the right the tools that are the same on every page: search, icon actions with badges, then the account. Pairs with SidebarInset; it does not span the rail.

Playground

Where you are on the left, the tools that are the same on every page on the right, the account last.

tone
  1. Feedback surveys
  2. Agent AI NPS Survey
<Topbar tone="chrome">
  <SidebarTrigger />
  <TopbarTitle>Agent AI NPS Survey</TopbarTitle>
  <TopbarActions>
    <SearchField aria-label="Search" />
    <TopbarAction label="Inbox" icon={<BellIcon />} badge={3} />
    <TopbarSeparator />
    <UserMenu variant="topbar" />
  </TopbarActions>
</Topbar>

In the shell

The bar as the app mounts it: beside the rail, spanning the content column only.

  1. Feedback surveys
  2. Agent AI NPS Survey
The bar spans the content column, not the rail — the account sits at its right end.
<SidebarProvider>
  <Sidebar>…</Sidebar>
  <SidebarInset>
    <Topbar tone="chrome">…</Topbar>
    {children}
  </SidebarInset>
</SidebarProvider>