shadcn.io is not affiliated with official shadcn/ui
Version Picker Documentation Navbar Block for Ark UI
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 Ark 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 locale provider so the menu, the popover and the sheet follow the page.