Navbar

Keeps the brand, page links and main action at the top of a page, and marks the section you are reading.

Configurations

Supported configurations for this component.

3 examples

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
brandreq	`React.ReactNode`	-	The brand lockup on the left (a mark and the product name). Shown again at the head of the menu drawer.
links	`{ label: string, href: string }[]`	-	The page's links, centred. An href starting with '#' scrolls to that section smoothly and is tracked; any other href navigates.
actions	`React.ReactNode`	-	The primary action on the right, kept in the bar at every width. One filled Button.
secondaryActions	`React.ReactNode`	-	Quiet actions before the primary one (a ghost Sign in). Fold into the menu below md.
menuActions	`React.ReactNode`	-	The drawer footer, primary first. Defaults to `actions` then `secondaryActions` as given.
trackSections	`boolean`	true	Mark the link for the section in view with aria-current="location".
sectionSelector	`string`	'section'	The elements the reading line is tested against. A match without a linked id clears the mark.
sticky	`boolean`	true	Stick to the top of the scroller, with the hairline shown once the page has moved. False renders a static bar with its hairline always on.
maxWidth	`string`	-	The row's max width (a CSS length), to line the bar up with the page's content column. Full width by default.
menuLabel	`string`	'Menu'	The drawer's accessible name; the menu buttons read "Open menu" and "Close menu" from it.
onNavigate	`(href: string) => void`	-	Called instead of the browser's own navigation for links not starting with '#', for a client router.

Links to one destination in a sidebar, in full or icon-only form.

Titles a dashboard panel and holds the actions that belong to it.

Collects a panel's secondary actions behind a kebab trigger.