A top navigation bar with a hover pill that slides between links, an underline under the current page, a frosted look once scrolled, and a menu on narrow screens.
Scroll down, then back up
Research that keeps up with your team.
The bar is see-through at the top of the page. Once content passes under it, it turns frosted.
pnpm dlx shadcn@latest add @latheui/navbarPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Navbar is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts header props.
| Prop | Type | Default | Description |
|---|---|---|---|
| links* (required) | { label, href, badge? }[] | — | The links, in order. |
| brand | ReactNode | — | Your logo or name, on the left. |
| current | string | — | The href of the current page. It gets the underline and aria-current. |
| actions | ReactNode | — | Buttons on the right. In the narrow menu they sit under the links. |
| label | string | "Main" | Accessible name of the navigation landmark. |
| position | "sticky" | "fixed" | "static" | "sticky" | sticky and fixed stay at the top while the page scrolls. |
| hideOnScroll | boolean | false | Slides away while scrolling down, back on the way up. |
| container | RefObject<HTMLElement> | — | The element that scrolls, when it is not the page. |
| renderLink | (link, props) => ReactNode | — | Renders every link. Spread props onto your router's link; children is the label. |
<Navbar className="border-border bg-background" links={links} />With position="fixed" the bar floats over the page. Add top padding to the content under it.
<Navbar position="fixed" links={links} brand={<Logo />} />
<main className="pt-14">…</main>