Sliding Indicator Navbar

Navbar35: Sliding Indicator Navbar

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.

Installation

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).

Quick start

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" },
      ]}
    />
  );
}

Props

type NavItem = { label: string; href?: string };

Behavior notes

• The underline indicator's 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.
• Hovering any desktop item moves the indicator there; moving the mouse away returns it to activeNavItem. If neither is set, the indicator is hidden (opacity-0).
• The navbar is sticky top-0 with a bottom border; the desktop nav row and buttons only render at lg and above.
• Below 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.