App Header

See Page structure for the AppHeader slot layout.

Hamburger button (SidebarTrigger)

SidebarTrigger in AppHeaderLeading is mobile-only. On desktop the sidebar has its own collapse control; the header trigger is hidden on desktop. SidebarTrigger reads sidebar state from context; it requires SidebarProvider in the tree and will throw without it.

// Correct usage: mobile hamburger paired with a Sidebar
<SidebarProvider>
  <AppLayout>
    <Sidebar>{/* navigation */}</Sidebar>
    <AppLayoutContent>
      <AppHeader>
        <AppHeaderLeading>
          <SidebarTrigger
            icon={<MenuIcon size={16} />}
            className="tw:md:hidden"
          />
        </AppHeaderLeading>
        {/* header content */}
      </AppHeader>
      <AppLayoutMain>{/* page content */}</AppLayoutMain>
    </AppLayoutContent>
  </AppLayout>
</SidebarProvider>

Breadcrumb scrolling

AppHeaderContent scrolls its children horizontally when they overflow; no wrapping, no second line. It automatically keeps trailing content, such as the current breadcrumb, in view.

Basic usage

Add SidebarTrigger only inside the full sidebar layout shown in Page structure.

Code

<AppHeader>
  <AppHeaderContent>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Accounts</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Green Valley Farm</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Orders</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>ORD-2024-00847</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </AppHeaderContent>

  <AppHeaderTrailing>
    <AppHeaderNotifications count={3} />
  </AppHeaderTrailing>
</AppHeader>

Without content slot

AppHeaderTrailing is always pushed to the right edge; no AppHeaderContent needed for it to stay in position.

Code

<AppHeader>
  <AppHeaderLeading>
    <span className="tw:text-sm tw:font-medium">Accounts</span>
  </AppHeaderLeading>

  <AppHeaderTrailing>
    <AppHeaderNotifications count={5} />
  </AppHeaderTrailing>
</AppHeader>

API

AppHeader

No documented props

AppHeaderContent

No documented props

AppHeaderLeading

No documented props

AppHeaderNotifications

Icon button slot for opening product notifications, with optional count badge.

Name	Type/Description
aria-label	string | undefined Accessible name for the icon-only notification button.
className	string | undefined
count	number | undefined Badge value. Omit or pass 0 to hide the badge.
onClick	MouseEventHandler<HTMLButtonElement> | undefined

AppHeaderTrailing

No documented props