Pill Nav
Navigation
Source and install need .
pnpm dlx shadcn@latest add @assembli/site-headerSite Header
The everyday marketing header: logo, links and dropdowns on Base UI's Navigation Menu, a sign-in link and a call to action. Transparent at the top, frosted with a hairline once you scroll. Dropdowns hold icon links in one or two columns, a feature card and a footer link in one panel that glides and resizes between them. Phones get a full-screen menu with accordion sections.
Props
Other props pass through to the root element.
logo*
React.ReactNode
homeHref
string
Default
"/"Where the logo links.
items*
SiteNavItem[]
current
string
The current page's href. Its link, or the dropdown holding it, is marked current.
secondaryAction
{ label: string; href: string }
primaryAction
{ label: string; href: string }
banner
React.ReactNode
A slim bar above the header, such as an announcement. It scrolls away; the header sticks.
sticky
boolean
Default
trueStick to the top of the page.
maxWidth
string
Default
"72rem"Width of the inner row.
| Description | |||
|---|---|---|---|
| logo* | React.ReactNode | – | |
| homeHref | string | "/" | Where the logo links. |
| items* | SiteNavItem[] | – | |
| current | string | – | The current page's href. Its link, or the dropdown holding it, is marked current. |
| secondaryAction | { label: string; href: string } | – | |
| primaryAction | { label: string; href: string } | – | |
| banner | React.ReactNode | – | A slim bar above the header, such as an announcement. It scrolls away; the header sticks. |
| sticky | boolean | true | Stick to the top of the page. |
| maxWidth | string | "72rem" | Width of the inner row. |
