Loading…

Dowel

Loading…

Navbar

beta

A site header — brand, navigation, actions and a mobile menu — that is static, sticky or hides on scroll, flat at the top and lifted over content.

Navigation
1 file
1 npm package
Accessibility notes

Playground

Dowel

Paragraph 1. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 2. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 3. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 4. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 5. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 6. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 7. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 8. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 9. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 10. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 11. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Paragraph 12. Scroll to see the navbar lift — or, with hide-on-scroll, slide away while you read and return the moment you scroll back up.

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add navbar

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Navbar } from "@/components/ui/navbar";

Examples

Every example the tests run, live and operable, side by side.

Default
Floating
Hide On Scroll

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Navbar>

Prop	Type	Default
`behavior`	`"static" \| "sticky" \| "hide-on-scroll"`	`"sticky"`
`elevate` Lift the bar — border, shadow, blur — once the page has scrolled. Default true.	`boolean`	`true`
`innerClassName` Class for the inner row that holds the parts.	`string`	—
`variant`	`"default" \| "floating" \| "glass"`	`"default"`

Plus every attribute of <header>.

<NavbarSkipLink>

Plus every attribute of <a>.

<NavbarBrand>

Plus every attribute of <a>.

<NavbarContent>

Plus every attribute of <div>.

<NavbarActions>

Plus every attribute of <div>.

<NavbarMobileMenu>

Prop	Type	Default
`label` Accessible name for the menu button. Default "Menu".	`string`	`"Menu"`

Plus every attribute of <div>.

Accessibility

A <header> landmark with a skip link (NavbarSkipLink) that appears on focus. Put the navigation inside a <nav> with a label. With behavior="hide-on-scroll" it never hides while it holds keyboard focus or its menu is open, so a keyboard user always sees where they are. The mobile menu is a disclosure: a button with aria-expanded and aria-controls; Escape closes it and returns focus to the button, and following a link closes it.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Site header