shadcn.io is not affiliated with official shadcn/ui
Flyout Panels Navbar Block for Ark UI
A one-bar navbar for a workflow-automation tool whose three triggers each open a narrow flyout under themselves, a plain list, a described list with status badges and a promo card with a small chart, with a caret pointing at the open trigger and collapsible rows in a sheet on phones.
Installation
Overview
A flyout navbar for React with Ark UI, where nothing is full width. The wordmark leads; Product, Integrations and Customers each open a panel directly under their own button, and the three panels have three shapes: a 288-pixel list of four links, a 384-pixel list whose rows carry an icon, a description and a status badge (Live, Beta, Soon), and a 256-pixel promo card with a figure, a line of text, a seven-bar chart and a link. The open trigger draws a small caret on its bottom edge that sits over the panel's top edge and points at the trigger, in both reading directions. Sign in and a Start free Shine Button close the row. Below the md breakpoint a menu button opens a sheet from the end edge where each menu is a collapsible row, so any number of them can be open together. The panels and the sheet open over the page, so the block stays one bar high (56 pixels), and the bar draws no bottom border: the next block's top rule is its bottom edge. It's built from Navigation Menu, Collapsible, Badge, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. The customer figures are example data. For tools with a few distinct things to say under each menu.
FAQ
How do I change the panels?
The three lists are typed arrays and an object at the top of the file: PRODUCT (a title, an icon and an href per link), INTEGRATIONS (the same plus a one-line description and a status for the badge) and CUSTOMERS (the figure, its line, the seven bar heights in percent, the chart's text description and the link). The panel and the sheet read the same data. A panel's width is a class on its list (w-72, w-96, w-64); keep them narrow, because a flyout that grows past about 400 pixels is a mega menu and wants a different layout.
How is the caret drawn?
It is a rotated square on the open trigger's own bottom edge (its ::after), with its first two sides drawn and the panel's background, sitting over the panel's top edge: the panel is eight pixels under the trigger on every library, and the square is centred on that gap. It lives on the trigger because the panels clip their own overflow, and because the trigger centres it however wide the panel is. It appears when the trigger's aria-expanded is true, mirrors with the page's direction and is left out under reduced motion's animation.
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, the three menu buttons, 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. The chart is an image with a text alternative that gives its trend.
Opening a menu moves focus to its first link; Tab walks the links 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, 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 end edge (the right in a left-to-right page, the left in a right-to-left one) with a header that repeats the wordmark and a close button. Product, Integrations and Customers are collapsible rows, closed at first and independent of each other: the list, the described list with its badges and the promo card with its chart appear as they do in the flyouts, at the width of the sheet. Sign in and Start free sit at the foot. 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 link 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 Start free take asChild with the link inside, so either can be your router's link.
Why does the sheet read the page's direction?
A sheet's side is a physical edge (left or right), so a sheet that should come from the end of the line has to know which that is. The menu button's click handler reads its computed direction and picks the edge. If your app always reads one way, pass a fixed side.