LAYOUT

AppTopBar

Site header with three slots: brand, navigation, and actions. Defaults to sticky top placement; opt out via sticky={false}.

Import

1import { AppTopBar, AttrToggleGroup } from 'damo-ui'
2import Link from 'next/link'

Live preview

DEMO

Theme

Basic usage

1<AppTopBar
2  logo={<Link href="/">Brand</Link>}
3  nav={
4    <>
5      <Link href="/docs">Docs</Link>
6      <Link href="/pricing">Pricing</Link>
7    </>
8  }
9  actions={
10    <AttrToggleGroup
11      label="Theme"
12      storageKey="theme"
13      attribute="data-theme"
14      options={[
15        { value: 'light', label: 'Light' },
16        { value: 'dark', label: 'Dark' },
17      ]}
18      defaultValue="light"
19    />
20  }
21/>

Non-sticky variant

<AppTopBar sticky={false} logo={/* … */} />

API

AppTopBar props

Prop	Type	Default	Description
logo*	ReactNode	—	Branding slot. Wrap a Next link or anchor that points to home.
nav	ReactNode	—	Inline navigation. Renders inside a <nav> element.
actions	ReactNode	—	Right-aligned controls. Compose with `AttrToggleGroup`, `Popover`, etc.
sticky	boolean	true	Stick the bar to the viewport top with z-index header.
className	string	—	Tailwind classes are merged on top of the defaults.

Accessibility

The header renders as a <header> (banner role).
Wrap the brand mark in a link with an aria-label when the label is decorative (icon-only).

← AppShell PageHeader →