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.

<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>
  1. Feedback surveys
  2. Agent AI NPS Survey

In the shell

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

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