shadcn.io is not affiliated with official shadcn/ui
Role-Based Navbar Block for React
An app bar with a View as toggle (Admin, Editor, Viewer) that swaps the bar's links in one cell, so its width never moves, with a role badge that says what the role can do.
Installation
Overview
A role-aware navigation bar for React with Base UI, for an access-management console called Keywarden. One bar between the page's rails: the wordmark, the links, a "View as" toggle group (Admin, Editor, Viewer, one always on) and a role badge with an icon and what the role can do. Choosing a role swaps the links: Admin sees Overview, Members, Billing and Audit log, Editor sees Overview, Policies and Requests, Viewer sees Overview and Reports. The three sets share one grid cell as wide as the longest, the hidden ones are inert, and they cross-fade, so the bar's width and height never change. A polite line says what the new role can see. Below the lg breakpoint a menu button opens a sheet from the top with the same toggle group and badge above the current role's links. It's built from Toggle Group, Badge, Sheet, Guides and Button, with your theme's tokens for every colour. For consoles, CMSs and admin panels where a designer or a support agent wants to preview a role's navigation.
FAQ
How do I change the roles and their links?
Edit ROLES at the top of the file: each role has an id, a label, an icon, the sentence the badge shows and its list of links (the first is the current page, which gets aria-current="page" and a foreground stroke on the bar's bottom edge). The toggle group, the badge, the sheet and the width of the link cell are built from it, so adding a role adds a segment, a badge line and a link set. The roles and pages are made up for the demo.
Is this a real permission check?
No: it previews what each role sees, in the block's state. A navigation bar only decides which links to draw; keep enforcing access on the server for every page and every request. To use the block with a real user, remove the toggle group and read the role from your session instead of useState.
Why doesn't the bar move when the links change?
All three link sets live in one grid cell, so the cell is as wide as the longest set; the chosen one is visible and the others are invisible, transparent and inert (and hidden from assistive technology), so they take no focus and are never read. The badge works the same way: one line per role in one cell.
How does it work with a keyboard and a screen reader?
The links sit in a nav named Main; the toggle group is labelled "View as" and one role is always pressed (pressing the chosen role again does nothing). After a choice a hidden status line says, for example, "Viewing as Editor: Can edit. 3 links." The badge reads "Role: Can edit".
The arrow keys move between the three roles; Space or Enter chooses the focused one.
How does it work on a phone?
Below the lg breakpoint the bar shows the wordmark and a menu button; nothing wraps at 320 pixels. The sheet from the top holds the toggle group (the full width of the sheet) with the role badge beside its label, then only the current role's links. Choosing a role rewrites the list in place and keeps the sheet open; a link, the close button or Escape closes it and focus goes back to the menu button.
Related
- Pro
Contextual Navbar
Cells and splitsA navbar with a Site | App segment control whose two link sets and action sets cross-fade in one grid cell, so the bar's width and height never change.
- Pro
Multi-Tenant Navbar
Accounts and scopesAn app bar with two chained scopes, organization then project: choosing an organization rewrites the project list, and a role badge sits beside the organization's name.
- Pro
Workspace Switcher Navbar
Accounts and scopesAn app bar whose switcher button opens a searchable list of workspaces: recent ones first with number keys, a plan badge on every row, a check on the current one and a Create workspace button in the foot.
- Pro
Sub-Navigation Navbar
Two rowsA two-row header whose second row shows the chosen section's four links, the three link sets cross-fading in one grid cell, with the current section and the current page both marked.
- Pro
Split Layout Navbar
Cells and splitsAn app bar split by a solid divider that meets the top rule: navigation at the start, and at the end a help link and an avatar whose menu sets your presence (Active, Away, Do not disturb) and recolours its dot.
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.