For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- The top bar of a signed in product, with a breadcrumb or switchers, search, alerts, avatars or a user menu
- An editor toolbar with a back or close button, the page name and its run, publish or submit action
- A marketing site header with mega menu panels of linked pages and a Get Started button
When not to use
- A whole product layout with a side rail, a header and the content area together: use the App Shell blocks
- A keyboard palette that lists, groups and filters results as you type: use the Command component
- The account settings page a user menu opens, with team, billing and API key forms: use the Profile blocks
Agent notes
Navbartakes no props, so every label, person and option it shows is fixed in the block; lift them into props to reuse it- No button, link or menu item routes or calls an API; add an
onClickor a realhrefwhere each one should go - Each page.tsx adds only demo padding or dashed placeholder boxes around
Navbar, none of which belongs in your layout
Third-party API docs
- next-themes: API reference, docs, used by 6 of 13 blocks
- date-fns v4: docs, used by 1 of 13 blocks
- React DayPicker v9: API reference, docs, used by 1 of 13 blocks
https://web.dev.reui.io/blocks/application/navbar.mdsearch({ query: "navbar", type: "block", category: "navbar" })Shadcn Navbar Blocks: App Headers First, Marketing Second
The shadcn navbar query covers two different jobs, and this category serves one of them well. Almost every block is a header for the top of a signed-in application: workspace and project bars, developer platform headers, admin consoles, editor toolbars and analytics dashboards. They assume a breadcrumb, an account menu and actions that operate on whatever record is open.
The other job, a marketing site header with mega menus and a Get Started button, is covered by a single block. If a landing page nav is what you came for, that is the one built on ReUI NavigationMenu with two-column Product and Company dropdowns, a Pricing link and a CTA whose arrow slides in on hover. It is a good header, but the depth in this set is elsewhere.
The app bars are built from ReUI Breadcrumb and Badge with shadcn DropdownMenu, Avatar, Popover, Tabs and ButtonGroup, so they sit on primitives your app shell probably already installed.
All Navbar Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Project Workspace Project workspace navbar with breadcrumb, line tabs, and a collaborator avatar stack
- Team Presence Sticky workspace navbar with breadcrumb trail, team presence avatars, and filter and sort menus
- Org & Environment Switcher Developer platform top navbar with breadcrumb org, project and environment switchers
- Admin Command Search Admin console top navbar with centered Cmd+K command search and a notifications popover feed
- Workflow Editor Compact workflow editor navbar with active toggle, Test Run action, and history
- Analytics Toolbar Two-row analytics dashboard navbar with date range picker, compare toggle, and command-K search
- CMS Publish Bar CMS editor navbar with co-presence avatars and a split Publish button
- Agent Marketplace AI agent marketplace navbar with category filter pills, Deploy CTA, and notifications popover
- Repo Branch Picker Code editor app header with repo path breadcrumb and branch dropdown selector
- API Developer Portal API developer portal navbar with service switcher, HTTP request bar, and account menu
- Design System Manager Design system manager top navbar with center section tabs, version badge, and sync source switcher
- Marketing Mega Menu Marketing navbar with icon mega-menu dropdowns and a sliding-arrow Get Started button
- Editor Action Bar Compact editor action bar navbar with close button, document title, and submit action
What the In-App Headers Actually Do
- Context switchers put organization, project, environment, repository branch or API service into the breadcrumb itself, with color-dotted environments and deploy targets in the menu.
- Command search opens a centered Cmd+K Dialog with a Kbd hint, used on the admin console bar and the two-row analytics bar.
- Presence and notifications combine an Avatar group of collaborators and an invite popover with a notification feed carrying inline actions, progress and Rating rows.
- Committing actions appear as a split Publish ButtonGroup with Schedule and Save as draft, a Test Run action beside an active Switch, or a Send button next to an inline HTTP method select.
- Toolbar state covers date range pickers with a compare toggle, auto-refresh selects, filter and sort menus, section Tabs and light, dark and system theme toggles in the avatar menu.
Choosing a Bar for Your App Type
- Workspace and project apps: a breadcrumb trail, line Tabs with a count Badge, a collaborator stack and an expanding create action.
- Developer platforms and IDE-style tools: organization, project and environment switchers, a branch picker with deploy targets, and Share plus Run buttons.
- Content and design tooling: co-presence avatars with a split publish control, a version badge, and centered tabs for sections such as Patterns, Tokens, Icons and Motion.
- Automation and workflow builders: a slim sticky bar with a back link, an active toggle, run history, and an overflow menu for export, duplicate, share and delete.
- Focused editors: a close button, a truncating document title, a preview collapse toggle and a submit that asks for confirmation after the click.
- Analytics and admin: a two-row bar that keeps the range picker, export and command search reachable while the page scrolls.
Where the Navbar Ends and the Layout Begins
None of these blocks ship the page underneath them. They are headers, so they expect a body and, in most products, a sidebar. Pair one with an App Shell block for the frame and sidebar navigation, then let the navbar carry only the current record, its actions and the account menu.
Because they are sticky bars rather than full layouts, they compose cleanly with the rest of the set. The same header can sit above a Dashboard, a List view or a Kanban Board without changing anything except the breadcrumb and the primary action.
Related Shadcn Application Block Categories
- App Shell for the sidebar and content frame these headers are designed to sit on top of.
- Dashboard for the overview screen that usually lives directly under an analytics or admin bar.
- Settings for the configuration pages the account and workspace menus link into.
- Sheet for the side panels that notification feeds and row actions tend to open.
- List for the record collections a workspace toolbar filters, sorts and searches.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Is there a marketing site navbar in this set?
Are these navbars responsive?
Can I use one with my existing sidebar?
How do I install one?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.