Dark navbar with a hamburger menu cell that opens a fullscreen overlay — the panel and its centered links cascade down from the top, with a contact footer.
Dark navbar whose hamburger cell opens a fullscreen overlay menu that slides down from the top of the viewport: centered links cascade in with a per-item stagger, followed by a contact footer with address and phone. The main bar itself stays compact, showing a short quick-link set and CTA next to the brand.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/navbar45?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar45?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar45.tsx and the button1 component it uses for its call-to-action.
The installed file exports navbar45Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar45, navbar45Demo } from "@/components/beste/block/navbar45";
export default function Layout() {
return <Navbar45 {...navbar45Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar45 } from "@/components/beste/block/navbar45";
export default function Layout() {
return (
<Navbar45
brand="Polaris"
menuLabel="Menu"
closeLabel="Close"
links={[{ label: "Work", href: "/work" }]}
menuLinks={[
{ label: "Home", href: "/" },
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Contact", href: "/contact" },
]}
cta={{ label: "Book a Call", href: "/contact" }}
address="12 Mercer Street, Soho, New York"
phone="+1 212 555 0134"
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark shown next to the menu trigger |
menuLabel | string | – | Text label next to the hamburger icon in the main bar |
closeLabel | string | – | Text label next to the close icon inside the overlay |
links | NavLink[] | [] | Short quick-link list in the main bar, visible only on lg |
menuLinks | NavLink[] | [] | Full link list shown centered inside the fullscreen overlay |
cta | CtaLink | – | Seal button rendered via Button1 with tone="primary", visible on md and up in the main bar |
address | string | – | Shown in the overlay's contact footer next to a map-pin icon |
phone | string | – | Shown in the overlay's contact footer as a tel: link with spaces stripped |
className | string | – | Extra classes for the outer <header> |
NavLink / CtaLink: { label: string; href: string }.
fullscreen: true, so its preview renders at fullscreen size; opening the menu covers the entire viewport as a fixed, fullscreen overlay rather than a dropdown or side panel.translate-y transform plus opacity transition (-translate-y-full to translate-y-0), not a conditional render.links (quick links) and menuLinks (the full list) are separate props by design: the trimmed set stays visible in the header bar, the fuller set fills the overlay.transitionDelay computed from its index (the footer's delay also factors in menuLinks.length), applied only while open is true.phone renders as a tel: link with whitespace stripped from the number.navbar64
A quiet top bar whose menu button opens a full-screen overlay — oversized numbered links with hover arrows, a contact block and social row beneath. Pure Auralis big type.
navbar82
A minimal bar with a wordmark, a sliding-marker pill and a two-line menu toggle that turns into a cross, opening a full-screen ink menu with film grain: numbered oversized serif links settle in one after another on the left, the photograph and description on the right blur to whichever link is hovered, and a ruled foot carries contact details, social links and the pill. The menu is always in the markup and shown with CSS.
navbar42
Table-inspired navbar with full-height bordered link cells, an availability cell and a dark full-height seal CTA cell.
navbar34
Navbar with slide-in sidebar drawer featuring grouped navigation sections and overlay backdrop. Perfect for content-rich sites wanting organized off-canvas navigation menus.