shadcn.io is not affiliated with official shadcn/ui
Enterprise Trust Navbar Block for React Aria
A one-bar navbar for a workforce-management platform with Platform and Solutions menus, a hairline that splits the bar, and at its end a SOC 2 badge that opens a popover of certifications, then Try demo and a sales button.
Installation
Overview
An enterprise navbar for React with React Aria, built around what a buyer looks for first. The wordmark leads; a Platform menu opens a short list of four products and a Solutions menu opens six industries in two columns, each with an icon tile, a title and one line, and Customers (the current page, marked by a foreground stroke on the bar's bottom edge) and Partners are plain links. A hairline splits the bar in two: it runs from the top rule to the bar's bottom edge and meets the top rule in a + mark. Past it, an outline SOC 2 badge is a button that opens a popover with the four things a security review asks for (SOC 2 Type II, ISO 27001, GDPR and regional hosting) and a link to request the report; an outline Try demo button and a Contact sales Shine Button follow. Below the lg breakpoint the menus fold: the bar keeps the wordmark, Contact sales (from 640 pixels) and a menu button, and the sheet that opens from the top holds Platform and Solutions as accordion groups, Customers and Partners, the badge and the report link in a footer row, and Try demo and Contact sales. The panels, the popover and the sheet open over the page, so the block stays one bar high (64 pixels, 56 on a phone), and the bar draws no bottom border. It's built from Navigation Menu, Popover, Badge, Accordion, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. The certifications are example copy: replace them with your own. For platforms sold to procurement as much as to users.
FAQ
How do I change the menus and the trust facts?
Edit MENUS at the top of the file. A menu has a label, its entries (a title, a one-line description, an icon and an href) and a layout string that sets the panel's width and columns (grid-cols-1 for the product list, grid-cols-2 for the industries). TRUST holds the facts the popover lists, and the sheet's footer shows the first badge. PAGES holds the plain links; mark the page you're on with current: true. Everything the popover claims should be true of your company: replace the example certifications before you ship.
How is the split drawn?
The end cluster is a flex item that stretches the bar's full height with border-s from the lg breakpoint up, and a Guides layer inside it draws the + mark where the divider meets the page's top rule. Below lg the cluster loses its border and mark, and the badge and Try demo leave the bar. Because the cluster has no vertical padding, the line is exactly the bar's height, and its bottom end is the next block's top rule.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Platform, Solutions, Customers, Partners, the SOC 2 button, Try demo and Contact sales. Enter or Space opens a menu or the badge's popover, the button says whether it is expanded, and Escape closes it and puts focus back on its button. The popover has a title and a description, and its list is a real list.
Opening a menu or the popover moves focus into its panel, a dialog: Tab cycles through its links until Escape or a click outside closes it. Nothing opens on hover.
How does it work on a phone?
Below the lg breakpoint the wordmark and a menu button stay on the bar, with Contact sales between them from 640 pixels up, and nothing wraps at 320 pixels. The menu button says whether the menu is open and which panel it controls; it opens a sheet from the top whose header lines up with the bar. Platform and Solutions are accordion groups, closed at first and one open at a time; Customers and Partners sit under them. The SOC 2 Type II badge moves to a footer row beside the same Request the report link, as plain content (a popover opened from inside a sheet would fight its focus trap), and Try demo and Contact sales close the sheet. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button. A sheet taller than the screen scrolls.
Does choosing a link close the menu?
Yes, in the panels and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page.
The open menu is held in the block (open, one id at a time), and each entry closes it on press.
The sheet's open state is held in the block too (sheetOpen), and each of its links closes it. Every link points at #: point them at your pages.
Try demo and Contact sales render a link when they have an href.
How does it sit on the page, and can it stick to the top?
The navbar is the page's first block: its + marks and rails line up with every block under it, its top rule falls on the window's top edge, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the menus and the popover still open under it. With reduced motion the panels, the popover and the sheet appear without their fades and slides.