Site Header
The sticky top bar of a site: brand, navigation and actions. Below md the items and actions move into a sheet.
Installation
Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:
npx @aedis/cli@0.1.0 initImport the theme once in your global CSS, after Tailwind:
app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";Then add the component:
npx @aedis/cli@0.1.0 add site-header# pnpm dlx @aedis/cli@0.1.0 add site-header · yarn dlx @aedis/cli@0.1.0 add site-header · bunx @aedis/cli@0.1.0 add site-headerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | — | Logo or name, wrapped in a link to homeHref named by labels.home. |
| homeHref | string | "/" | Where the brand links; goes through safeUrl. |
| items | { label: string; href: string; active?: boolean }[] | — | The navigation. active marks the current section (indicator and aria-current). |
| actions | ReactNode | — | Right side from md up (e.g. a GitHub link and a primary Button); inside the sheet below md. |
| labels | Partial<SiteHeaderLabels> | — | home: name of the brand link; menu: the menu button and sheet title. |
| className | string | — | Classes for the header element. |
Security
- Every href goes through safeUrl: javascript:, data: and vbscript: never become links.
- External items get rel="noopener noreferrer" and a visible marker.