shadcn.io is not affiliated with official shadcn/ui
Priority Plus Navbar Block for React
A priority-plus navbar for a media-planning suite in a resizable frame: the links that fit stay on the bar and the rest drop into a More menu as you drag the frame narrower, decided by container queries.
Installation
Overview
A priority-plus navbar for React with Base UI, the bar that never wraps and never hides a page from you. The bar sits in the first panel of a resizable pair inside a framed stage with corner marks, and it decides what to show from the width of its own panel, not from the window: the wordmark and the links that fit stay, and as the panel narrows the last link drops out first and reappears in a More menu, which only shows once something has dropped. Below about 420 pixels the Shine Button goes too and below about 230 the wordmark's name, leaving the icon and More. The handle between the panels is a focusable separator you can drag or move with the arrow keys, so the behaviour is something you can try. The links stay on the bar by container queries, so there's no measuring of the links themselves; the More menu reads the panel's width once to know which links it holds. The menu opens over the page, so the block stays one framed bar high, and the page's rails and top rule come from the Guides spine. It's built from Navigation Menu, Resizable, Shine Button and Guides, with your theme's tokens for every colour. For dashboards, marketing suites and any bar whose link count is bigger than its worst-case width.
FAQ
How does it decide which links stay?
Each entry of LINKS has an at (the panel width in pixels from which the link stays on the bar) and a show class string, the same width as a container query (hidden @[420px]:block). The bar's panel is the container (@container), so the links appear and disappear in CSS with no layout shift and no script. The order of LINKS is the priority: the first stays longest. Change both numbers together when you change a link's label or add one, since a longer label needs a wider bar; the More button's own class (@[830px]:hidden) is the width from which every link fits.
What does the More menu hold?
Exactly the links that have dropped out. A ResizeObserver reads the panel's width and LINKS filtered by at gives the ones that don't fit; until the width is known (the first paint on a server) the menu holds all of them. Each shows its name and its one-line description, the current page keeps its stroke on the bar only while it's on the bar, and choosing a link closes the menu.
How do I resize it, and how do I use it without the frame?
Drag the handle or focus it and press the arrow keys; Home and End jump to the narrowest and the widest bar. The frame is only there to show the behaviour: in a real page, drop Resizable and its panels, keep the @container element (the bar) as the header's full-width child, and the same classes decide from the page's own width. The wordmark's name and the Shine Button follow their own widths (230 and 420 pixels).
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 link that's on the bar, More, New plan and then the handle. Enter or Space opens More, its button says whether it's expanded, and Escape closes it and puts focus back on More. The handle is a separator named Resize the bar with a value, moved by the arrow keys.
Focus stays on More when the menu opens; Tab moves into the panel. The arrow keys move along the bar and between the panel's links. The menu also opens on hover.
How does it fit on a phone?
The frame is the page's width and the bar starts at about two thirds of it, which on a 375-pixel phone is wordmark icon and More: every link is in the menu. Drag or use the keys to give it more room and the links come back in order. Nothing wraps and nothing scrolls sideways at 320 pixels, and in right-to-left layouts the bar and the handle mirror.
What moves, and what about reduced motion?
Links drop in and out of the bar as the width crosses their threshold, with no transition; the More menu fades and grows from its button, the chevron turns, and a band of light sweeps across the Shine Button on hover and focus. With reduced motion the menu appears without fading, the chevron turns at once and the light fades in where it stands.
Related
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.
- Pro
Animated Hamburger Navbar
Mobile and drawersA menu-first navbar for a ceramics studio: a wordmark, a Shine Button and a hamburger whose three lines turn into a cross, opening a full-width card of six links that ease in one after the other.
- Pro
Icon-Only Navbar
Cells and splitsAn icon-only navbar for a messaging app: six destinations in square cells on shared hairlines, each named by a tooltip, with unread dots and a Show labels toggle that widens the cells to reveal the words.
- Pro
Drill-Down Drawer Navbar
Mobile and drawersA drawer navbar for a travel planner: a Menu button at every width opens a sheet from the end where Plan and Explore slide a second panel in with a Back button, with Pricing and Help centre as plain links and a Shine Button at the foot.
- Pro
Category Chips Navbar
Two rowsA two-row shop navbar: wordmark, a search that jumps to a category and account and bag links on top, and below a strip of category chips with counts that snap-scrolls with edge fades and brings the current chip into view.
- Pro
Tabs Underline Navbar
Link highlightsA navbar for a financial reporting tool built as cells: the wordmark in its own cell, full-height report tabs whose 2 px mark sits on the bar's bottom edge and slides on selection, and an Export action, with arrow-key navigation and a scrolling tab row on phones.