Brand and links on the left, a ghost and a solid button on the right. Pricing drops a full-width panel with a short intro, a Compare plans link and three mini plan cards, each with a name, a price, three lines and an outline button. On a phone the menu slides down as an accordion whose Pricing group holds stacked plan cards. Panels stay in the markup and are toggled with CSS.
A sticky bar with the brand and links on the left and a ghost plus solid button pair on the right. Pricing drops a full-width panel that previews your plans before anyone leaves the page: a short intro with a Compare plans link, then three mini plan cards, each with a name, a price, three lines and an outline button. On a phone the menu slides down, and its Pricing group opens as an accordion of stacked plan cards.
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://beste.dev/r/navbar113?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar113?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar113.tsx plus the shadcn button primitive it uses.
The installed file exports navbar113Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar113, navbar113Demo } from "@/components/beste/block/navbar113";
export default function Page() {
return <Navbar113 {...navbar113Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar113 } from "@/components/beste/block/navbar113";
export default function Page() {
return (
<Navbar113
brand="Orbit"
links={[
{ label: "Product", href: "/product" },
{ label: "Customers", href: "/customers" },
]}
pricing={{
label: "Pricing",
heading: "Simple plans that grow with you",
description: "Every plan includes a 14 day trial.",
plans: [
{ name: "Starter", price: "$0", period: "per month", features: ["3 projects", "1 GB storage", "Community support"], button: { label: "Start free", href: "/signup" } },
{ name: "Team", price: "$24", period: "per seat a month", features: ["Unlimited projects", "100 GB storage", "Email support"], button: { label: "Try Team", href: "/signup?plan=team" }, featured: true },
],
compare: { label: "Compare plans", href: "/pricing" },
}}
actions={[
{ label: "Log in", href: "/login", variant: "ghost" },
{ label: "Get started", href: "/signup" },
]}
labels={{ open: "Open menu", close: "Close menu" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
pricing | PricingMenu | – | The item that opens the plan preview |
links | NavItem[] | [] | Plain links before it |
actions | ActionButton[] | [] | Buttons on the right, repeated at the foot of the mobile menu |
labels | { open?: string; close?: string } | {} | Accessible names for the mobile toggle |
className | string | – | Extra classes for the outer <header> |
type PricingMenu = {
label: string;
heading: string;
description: string;
plans: Plan[];
compare?: NavItem;
};
type Plan = {
name: string;
price: string;
period: string;
features: string[];
button: NavItem;
featured?: boolean;
};
type NavItem = {
label: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
variant?: "default" | "outline" | "ghost" | "secondary";
};aria-hidden and inert.aria-expanded and aria-controls; the panel closes on mouse leave, Escape and a pointer down outside the header. Hovering a plain link closes it.featured: true sits on a bg-muted surface in both the panel and the mobile cards.