shadcn.io is an independent project built on shadcn/ui
Installation
Overview
A mega-menu navbar for React with Base UI, 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.
Focus stays on the menu's button when it opens; Tab or the arrow keys move into the panel. The arrow keys also move along the bar and between the panel's links. The menus also open on hover, and the panel resizes between menus as one surface.
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.
Each panel link 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.
Sign in and Start free render the link they're given with render, with nativeButton={false}.
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; moving between menus slides and resizes the one surface.
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.
