shadcn.io is not affiliated with official shadcn/ui
Mega Menu Navbar Block for React Aria
A one-bar navbar for an observability platform whose Products, Resources and Company menus each open a wide panel of three link columns closed by a footer strip, with an accordion of the same links in a sheet on phones.
Installation
Overview
A mega-menu navbar for React with React Aria, for a product whose site has more to show than one short list. The wordmark leads; Products, Resources and Company each open one wide panel of three columns, a small heading over three rows that each carry an icon on a tile, a title and one line, and under the columns a strip of three cells holds the latest post, the changelog and the status page. Pricing follows as a plain link, the current page marked by a foreground stroke on the bar's bottom edge, and Sign in and a Start free Shine Button close the row. Below the md breakpoint a menu button opens a sheet from the top where each menu is an accordion group with the same links under the same headings. The panels 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: the next block's top rule is its bottom edge. It's built from Navigation Menu, Accordion, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For developer and infrastructure sites whose menus group nine or more pages.
FAQ
How do I change the menus and the links?
Edit MENUS at the top of the file. Each menu is a label and three groups, each group a title and three entries (a title, a one-line description, an icon and an href). The bar's panels and the phone sheet both read it, so they never drift apart. FOOTER holds the three cells under every panel and PAGES the plain links; mark the page you're on with current: true and it gets aria-current="page", the stroke on the bar and a tint in the sheet. Keep a description to one short clause: the columns are about 240 pixels wide at the md breakpoint and a long line wraps to a third row.
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, each menu button, Pricing, Sign in and Start free. Enter or Space opens a menu, its button says whether it is expanded, and Escape closes it and puts focus back on its button. Each column is a labelled section with a heading and a list.
Opening a menu moves focus into the panel, which is a dialog: Tab cycles through its links until Escape or a click outside closes it. The menus open on click, not on hover.
How does it work on a phone?
Below the md breakpoint the wordmark, Start free and a menu button stay on the bar, 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. Products, Resources and Company are accordion groups, closed at first and one open at a time, each holding its three headings and nine links; Pricing, Sign in and Start free sit below them. 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. The footer strip (post, changelog, status) is a desktop panel detail and isn't repeated in the sheet.
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 link 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.
Sign in and Start free render a link when they have an href.
Where does the panel sit, and what if the screen is narrow?
A panel is min(60rem, 100vw - 2rem) wide and opens under the bar, so it never leaves the screen.
It starts under its button and shifts toward the page when there isn't room.
Panels are 300 to 350 pixels tall; add a row to a group and they grow with it, so keep them under about 420 pixels.
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. 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 still open under it. With reduced motion the panels and the sheet appear without their fades and slides.