Skip to main content
MACAW

TopBar

Organismbeta@macaw-ds/ui · since 0.1.0

The application's global header: brand, optional centre content and actions. Not a page title; that is PageHeader.

Open gallery

When to use

Once per application, in AppShell's topBar slot. Brand on the left, optional centre content such as search or a test-mode indicator, actions on the right.

When not to use

  • Page titles and page actions. Those belong to PageHeader, under the TopBar.
  • Marketing headers. MACAW is product UI.

Anatomy

Three slots in a row: brand, children (centre, flexible), actions. The bar is sticky at the top, on surface layer-1 with a bottom border, and its height is the size.topbar token.

Density

size.topbar is 56px comfortable and 48px compact. Anything sticky below it uses top-topbar, so it moves with the density.

Accessibility

  • Renders a header, which is the page's banner landmark.
  • Not focusable itself; its links and buttons are. Icon-only actions need aria-label.
  • Sticky content below it is offset by its height, so focus is never hidden behind it (WCAG 2.2 SC 2.4.11).

Do and don't

Do

  • Link the brand to the product home.

Don't

  • Do not add a primary Button to the TopBar; primary actions belong to the page.

Rules

Hard rules an agent must follow. The reviewer agent and the lint config check the ones that can be checked.

  1. One TopBar per page, placed in AppShell's topBar slot.
  2. Actions are ghost Buttons; icon-only actions need aria-label.
  3. Never put the page title in the TopBar; that belongs to PageHeader.

Related