Blocks

Navbar

Sticky top navigation that rides transparent over the hero, then settles onto a blurred overlay with a hairline border once you scroll past the threshold.

On a real page the bar rides transparent over the hero, then settles onto a blurred overlay once you scroll past the threshold. On mobile the hamburger morphs into an X with a staggered drawer.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add navbar

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Navbar } from "@lumora/ui/blocks/navbar";
// or from the barrel:
import { Navbar } from "@lumora/ui";

Props worth knowing

links is an array of { label, href }; logo replaces the default wordmark; ctaLabel/onCtaClick drive the accent button. threshold sets the scroll distance before the blurred backdrop settles in (default 24). Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.