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 '@/components/ui/app-top-bar'
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.
menuTriggerSize	'sm' \| 'md' \| 'lg'	'md'	Size of the mobile menu hamburger ('sm', 'md', or 'lg'; default 'md') so it can be matched to an adjacent action button.
menuTriggerVariant	'flat' \| 'raised'	'flat'	Memphis surface of the hamburger: 'flat' (default, plain bordered) or 'raised' (offset shadow + press, identical to the ghost Button).
menuTriggerCompact	boolean	false	Render the hamburger at compact density so its default 'md' box is 30px, pixel-matching a compact IconButton in actions.
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 →