Enterprise Trust Navbar Block for React

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.

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.

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. Focus stays on a menu's button when it opens; Tab or the arrow keys move into the panel, and the arrow keys move along the bar. The menus also open on hover. The popover moves focus to its link, and Tab out of it closes it.

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.

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. Each entry takes closeOnClick. 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 the link they're given with render, with nativeButton={false}.

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.