shadcn.io is not affiliated with official shadcn/ui
Version Picker Documentation Navbar Block for React
A documentation bar with a version menu (v4 Latest, v3 and v2 flagged as older) that rewrites a path preview, and an On this page popover of five heading links.
Installation
Overview
A docs version picker for React with Base UI, in the bar of a documentation platform called Foldmark. One bar between the page's rails with nothing drawn inside it but the top rule: the wordmark, Guides, Reference and Examples (from lg), a path preview, a version menu and an "On this page" button. The menu lists v4 with a "Latest" badge, then v3 and v2 with a warning icon. Choosing one rewrites the path preview (from xl) and its second line, which reads "Latest version" or "You are reading v3, an older version", and a polite line says the same; the trigger carries the warning icon for an older one. "On this page" opens a popover of five anchor links to the page's headings with the current one marked. On a phone a sheet from the top holds the links and the versions as a three-way switch, and "On this page" stays in the bar. It's built from Dropdown Menu, Popover, Toggle Group, Badge, Sheet, Guides and Button, with your theme's tokens for every colour. For docs that keep old versions online and want readers to know which one they are on.
FAQ
How do I change the versions and the headings?
Edit VERSIONS (an id and whether it is the latest) and HEADINGS (a hash link and a label) at the top of the file, and PAGE for the path's last segment. The menu, the sheet's switch, the path preview and the unseen copies that hold the trigger's and the path's width are built from them. In an app, replace choose with your router's version change and point the headings at real ids.
How is an older version flagged?
Three ways, none of them colour alone: a warning icon beside the version in the trigger and in the menu, the words "You are reading v3, an older version" under the path preview, and a polite line when you choose it. The warning colour only tints the icon; the text stays in the foreground. The latest version carries a "Latest" badge instead.
How does it work with a keyboard and a screen reader?
The version trigger is a button named "Version: v4 Latest" that says whether its menu is open; the arrow keys move through the three radio rows, Enter or Space chooses and Escape closes, and focus returns to the trigger. "On this page" is a button that opens a popover of links; the current heading carries aria-current="location", choosing a link closes the popover, and Escape closes it and returns focus to the button. The path preview is read as "Path: /docs/v4/getting-started".
How does it work on a phone?
Below the lg breakpoint a menu button opens a sheet from the top with the links; below md it also holds the versions as a switch (a menu inside a sheet would fight its focus trap), with the same "older version" line beneath. "On this page" stays in the bar as the page's main control, and its popover fits the screen at 320 pixels. The wordmark shrinks to its icon on very narrow screens. Escape or the close button closes the sheet and focus goes back to the menu button.
Does it work right to left?
Yes. The bar mirrors, the menu and the popover open under their buttons' end edge and the current heading's rule moves to the start side. The path preview always reads left to right, as paths do.
Wrap the block in your direction provider (the catalog's DirectionProvider) so the menu, the popover and the sheet follow the page.
Related
- Pro
Page Tree Navbar
Page headersAn app bar whose Browse button opens a page tree where spaces expand and collapse, the current page is marked, and the button shows that page's name.
- Pro
A navbar for a support-desk product with a search field whose popup lists help articles and categories in two labelled groups, marks the matching letters, and offers an Ask support link when nothing matches.
- Pro
API Key Chip Developer Portal Navbar
Calls to actionA developer-portal bar with a masked API key chip: a Reveal toggle that shows the key for ten seconds and puts the mask back by itself, and a copy button, between the docs links and a Get a key button.
- Pro
Release Filter Navbar
Meters and progressA release navbar for a changelog product with category filters, unseen counts that clear when opened, a version badge and a feed link.
- Pro
Sidebar Toggle Navbar
Mobile and drawersA navbar with a sidebar toggle for a project tracker: a button, the [ key and a tooltip fold a mini sidebar under the bar between icons only and icons with labels, and on phones the same button opens it as a sheet.
- 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.