shadcn.io is not affiliated with official shadcn/ui
Fullscreen Overlay Navbar Block for Ark UI
A full-screen menu navbar for an architecture studio: a two-line menu button at every width opens a sheet that fills the screen with five large numbered links on hairline rows that fade up one after the other.
Installation
Overview
A full-screen overlay navbar for React with Ark UI, the menu for studios and portfolios that let their pages speak and keep the navigation for one big moment. One bar sits between the page's rails with the wordmark, a Shine Button and a two-line menu button at every width, with no inline links. The button opens a sheet that fills the screen: its header is the bar's (the wordmark where it was, a close button where the menu button was), five large links numbered 01 to 05 sit on hairline rows and fade up one after the other, and a few small links and a line about studio visits close the foot. Focus stays inside the sheet, Escape or the close button shuts it and focus goes back to the menu button, and a screen shorter than the menu scrolls it. The sheet opens over the page, so the block stays one bar high (56 pixels), and its bottom edge is the next block's top rule. It's built from Sheet, Button, Shine Button and Guides, with your theme's tokens for every colour. For architecture, design, art and photography sites whose menu is the page you look at when you need it.
FAQ
How do I change the links?
Edit PAGES at the top of the file for the five large links and MORE for the small ones at the foot. The numbers aren't typed: numberOf writes 01, 02 and so on from each link's place, so adding a sixth page numbers itself. The numbers are decoration (hidden from screen readers); the links sit in an ordered list, so a screen reader announces their order and count.
How does the staggered fade-in work?
Each link's row is mounted when the sheet opens and starts transparent and a little low (a starting: style), then transitions to place after its own delay: --i × 70 ms + 150 ms, so the five land over about half a second. Because the sheet is mounted again on every open, the entrance plays every time. With reduced motion the links are there when the sheet opens.
How does it fill the screen?
The sheet is a top sheet made h-dvh with its border removed, which is the real viewport height on phones whose browser bars come and go. The content is a column with the links at the top and the small links pushed to the foot; on a screen too short for it all, the sheet scrolls. The header repeats the bar's padding, so the wordmark and the close button land exactly where the wordmark and the menu button were.
How does it work with a keyboard and a screen reader?
The menu button is named Menu and says whether it's expanded and which sheet it controls. The sheet is a modal dialog named Menu: focus moves into it, Tab and Shift+Tab stay in it, and Escape or the close button closes it and returns focus to the menu button. Choosing a link closes it too, so a client-side route change doesn't leave it open over the next page.
The trigger and the close button take asChild, so they keep their own elements.
Can it show inline links on a desktop?
Yes. Add md:hidden to the menu button and a nav with the same links and max-md:hidden next to the wordmark; the overlay stays for phones. This block keeps the button at every width so the overlay is what you see in a gallery.
What moves, and what about reduced motion?
The sheet slides down and fades in, the links rise into place one after the other, and a band of light sweeps across the Shine Button on hover and focus. With reduced motion the sheet appears without sliding, the links are in place at once and the light fades in where it stands.