Radix UI navbar blocks.

The 100 navbar blocks are page headers: link bars with active states, mega menus, search, account controls, workspace switchers, app toolbars and mobile drawers. Most are one bar high, some add a second row, and menus and sheets open over the page instead of pushing it down.

They are sorted into 14 groups: Link highlights, Surface and theme, Cells and splits, Two rows, Mobile and drawers, Mega menus, and more. Marketing sites use link highlights, mega menus and calls to action; apps use search, scopes, toolbars and meters.

Animated Underline Navbar is a simple marketing bar. Mega Menu Navbar opens wide panels of link columns. Drill-Down Drawer Navbar keeps everything in a slide-in drawer. Command Palette Navbar and Search Overlay Navbar centre on search. Workspace Switcher Navbar suits multi-tenant apps, and Breadcrumb Page Header Navbar suits nested app pages.

A comment describes the bar, then a typed array of pages or menus (a label and an href each, with a current flag on the active one) and the component, which draws the bar and, on a phone, a sheet with the same links. The hrefs are # placeholders.

The active link is data: one entry has current: true, and the link gets aria-current page, which the styles key on for the underline and heavier text. Compute that flag from your router instead, for example by comparing usePathname() with each href in Next.js, and use your framework's Link for the anchors.

On a phone, most navbar blocks show a menu button that opens the shared Sheet (from the top, or from the end in Drill-Down Drawer Navbar) with the same links. In Animated Underline Navbar the bar and the sheet read one PAGES array, so editing it updates both.

Mega Menu Navbar defines each menu as columns with a heading and rows of an icon, a title and one line, plus a footer strip. Add a row to a column in the data, and the sheet's accordion version on phones gets it as well. Replace the icons with your own lucide icons.

Auth Buttons Navbar swaps Sign in and Sign up for an avatar menu in state after a demo email dialog. Replace that state with your session (from your auth library, read on the server where you can), and make Sign out call your sign-out function.

Scroll Spy Navbar makes the link of the section crossing the middle of its preview the current page and slides a stroke to it. In your page, apply the same idea with an IntersectionObserver on your section ids and set current from it. Choosing a link scrolls to the section.

This page lists 100 of the category's 100 navbar blocks for React on Radix UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The navbar blocks here are written on Radix UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/radix/navbar-admin-panel.json). The other bases are one picker away from /navbar-block/radix.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Radix UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/radix/navbar-admin-panel.json for Scoped Record Search Navbar. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Scoped Record Search Navbar brings Autocomplete, Badge, Button, Guides, Input Group, Kbd, Native Select and Sheet, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of navbar block, led by meters and progress (11), app toolbars (11), link highlights (9) and search (9), and sort by popular or name. A good first look: Scoped Record Search Navbar, Usage Ring AI Product Navbar and Date Range Picker Navbar. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a navbar block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, menus and search and product bars kinds.

Open its page and use the full-screen viewer (/view/navbar/radix/admin-panel) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each navbar block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Radix UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the navbar blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 navbar blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a navbar block, read it with get_block and install it on your React on Radix UI stack.

Pass `category: "navbar"` to search_blocks to search only the 100 navbar blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "navbar", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.