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

A sticky banner landmark on surface layer-1 with a bottom border. Its height is size.topbar (56px comfortable, 48px compact), which sticky elements below it use as their offset. Content is passed through three slots.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

No adjustable props: the content goes in slots.

Perch
Test mode
Examples
import { Button, TopBar } from '@macaw-ds/ui';

<TopBar
  brand={<Link href="/">Perch</Link>}
  actions={
    <Button iconOnly variant="ghost" aria-label="Notifications">
      <Icon name="bell" />
    </Button>
  }
/>

Examples

The named exports of the examples file, rendered as they ship.