Responsive navbar with animated sliding underline indicator that follows hover and highlights active navigation item. Perfect for SaaS dashboards and apps wanting polished micro-interactions.
A sticky desktop navbar where a thin underline slides beneath whichever nav item is hovered, falling back to the active item when the pointer leaves. The indicator position is measured from the actual link elements via refs, so it lines up exactly under labels of any width. Below the lg breakpoint the desktop row collapses into a hamburger-triggered dropdown panel with its own active-state styling.
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/navbar35?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar35?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar35.tsx and the shadcn/ui dependencies it needs (button).
The installed file exports navbar35Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar35, navbar35Demo } from "@/components/beste/block/navbar35";
export default function Layout() {
return <Navbar35 {...navbar35Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar35 } from "@/components/beste/block/navbar35";
export default function Layout() {
return (
<Navbar35
logo={{ text: "Morphic", href: "/" }}
navItems={[
{ label: "Home", href: "/" },
{ label: "Products", href: "/products" },
{ label: "Pricing", href: "/pricing" },
]}
activeNavItem="Home"
buttons={[
{ label: "Sign in", variant: "ghost", href: "/login" },
{ label: "Get Started", variant: "default", href: "/signup" },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
logo | { text: string; href?: string } | – | Brand text and link, shown at the left |
navItems | NavItem[] | [] | Desktop and mobile nav links, in order |
activeNavItem | string | – | Label of the item the sliding indicator rests on by default |
buttons | Array<{ label: string; href?: string; variant?: "default" | "outline" | "ghost" }> | [] | Action buttons rendered right of the nav, repeated in the mobile panel |
className | string | – | Extra classes for the outer <nav> |
type NavItem = { label: string; href?: string };left/width are recalculated from the hovered (or active, when nothing is hovered) link's offsetLeft/clientWidth via a ref array, then animated with a transition-all duration-300 on the span.activeNavItem. If neither is set, the indicator is hidden (opacity-0).sticky top-0 with a bottom border; the desktop nav row and buttons only render at lg and above.lg, a hamburger button toggles a conditionally rendered panel ({mobileMenuOpen && ...}, not SSR-hidden) listing nav items and buttons; tapping a nav link closes the panel.navbar31
Minimal navbar with configurable animated underline effects (slide, grow, or fade) on navigation links. Perfect for portfolio sites and creative agencies wanting subtle hover animations.
navbar36
Navbar with tab-style navigation supporting underline or pill active states for app-like navigation. Perfect for dashboards and admin panels with section-based interfaces.
navbar79
A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.
navbar73
A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.