Breadcrumb Navbar

Navbar40: Breadcrumb Navbar

A two-row navbar aimed at deep content hierarchies: a standard main navigation row (logo, links, action buttons) sits above a second, muted breadcrumb strip that renders a Home icon plus a BreadcrumbItem trail built from the breadcrumbs prop, with the last crumb rendered as plain (non-link) current-page text. The breadcrumb row only appears when breadcrumbs has entries, so the block degrades cleanly to a single-row navbar when it's omitted.

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/navbar40?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/navbar40?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar40.tsx and the shadcn/ui dependencies it needs (button, breadcrumb).

Quick start

The installed file exports navbar40Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Navbar40, navbar40Demo } from "@/components/beste/block/navbar40";

export default function Layout() {
  return <Navbar40 {...navbar40Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Navbar40 } from "@/components/beste/block/navbar40";

export default function Layout() {
  return (
    <Navbar40
      logo={{ text: "BreadNav", href: "/" }}
      breadcrumbs={[
        { label: "Products", href: "/products" },
        { label: "Electronics", href: "/products/electronics" },
        { label: "Smartphones" },
      ]}
      navItems={[
        { label: "Overview", href: "/overview" },
        { label: "Reviews", href: "/reviews" },
      ]}
      actionButtons={[{ label: "Buy Now", variant: "default", href: "/buy" }]}
      showHomeIcon
    />
  );
}

Props

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

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

Behavior notes

• The breadcrumb strip only renders when breadcrumbs.length > 0; there is no way to force-show an empty trail.
• Within the trail, every crumb is a link (BreadcrumbLink) except the last one, which always renders as static BreadcrumbPage text regardless of whether it has an href — so the final entry is never clickable.
• Separators are inserted between the home icon and the first crumb, and before every crumb after the first, matching standard breadcrumb spacing without a trailing separator.
• Both the main nav row and the breadcrumb strip are sticky together as one wrapped unit; desktop nav links and action buttons show at lg and up.
• Below lg, a hamburger toggles a conditionally rendered panel ({mobileMenuOpen && ...}) with stacked nav links and full-width action buttons; the breadcrumb strip itself has no separate mobile treatment and stays visible at all widths when present.