shadcn.io is not affiliated with official shadcn/ui
Card Grid Mega Menu Navbar Block for Ark UI
A one-bar navbar for a design-system suite whose Products menu opens a 3 by 2 grid of cells and whose Solutions menu opens a 2 by 3 grid of industries, cells sharing hairlines, with accordion groups in a sheet on phones.
Installation
Overview
A grid-menu navbar for React with Ark UI. The wordmark leads; Products opens a 3 by 2 grid of six cells, each an icon on a tile, a title and one line stacked in the cell, and Solutions opens a 2 by 3 grid of six industries, each with its icon beside the text. In both, the cells share hairlines and the panel's own frame, with no gap and no card around a cell, and a "View all" row with an arrow (mirrored in right-to-left pages) closes the grid. Docs (the current page, marked by a foreground stroke on the bar's bottom edge) and Pricing follow as plain links, and Sign in and a Get started 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 cells as rows and the same "View all" link. 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. It's built from Navigation Menu, Accordion, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For product suites whose menus are catalogues rather than lists.
FAQ
How do I change the cells and the grids?
Edit MENUS at the top of the file. A menu has a label, six cells (a title, a one-line description, an icon and an href), a more label for the closing row, and two class strings: grid sets the panel's width and column count (grid-cols-3 or grid-cols-2), layout sets whether a cell stacks its icon over the text or puts it beside it. The panels and the sheet read the same data. A cell count that fills its rows keeps the hairlines clean: six cells fit both 3 columns and 2; an uneven count leaves an empty tile whose background is the hairline colour. PAGES holds the plain links; mark the page you're on with current: true.
How are the shared hairlines drawn?
The grid is gap-px bg-border and every cell is a link with the panel's own background, so the one-pixel gaps show the border colour and nothing doubles. The hover and focus tint is a solid colour on purpose: a translucent tint would let the hairline colour show through the cell. The focus ring is drawn inside the cell, where the cells around it can't cover it. The panel keeps one outer radius and clips the grid to it.
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, Products, Solutions, Docs, Pricing, Sign in and Get started. Enter or Space opens a menu, its button says whether it is expanded, and Escape closes it and puts focus back on its button.
Opening a menu moves focus to its first cell; Tab walks the cells in reading order and carries on to the next control, and the menu closes as focus leaves it. The menus open on click, not on hover.
How does it work on a phone?
Below the md breakpoint the wordmark, Get started 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 and Solutions are accordion groups, closed at first and one open at a time, each holding its six cells as rows (icon, title, description) and the "View all" link; Docs, Pricing, Sign in and Get started 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.
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 cell closes it.
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 Get started take asChild with the link inside, so either can be your router's link.
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 still open under it. With reduced motion the panels and the sheet appear without their fades and slides.