shadcn.io is not affiliated with official shadcn/ui
Sidebar Nav Changelog Block for React
A docs site's release notes with a side navigation of four categories and their counts: current one marked, eight releases at the end, one divider with a plus mark, and chips that scroll on a phone.
Installation
Overview
A release list with a side navigation for React with Base UI, written for Marginwick, a fictional docs site builder. A start-aligned header sits over a two-panel band under the top rule. At the start a nav of four categories (All, Features, Improvements and Fixes), each a ghost button with its count in an outline badge and aria-current on the one you are in; at the end a quiet line naming the category and the matching releases as rows, each an article with its version and day, a title, a type tag and a sentence. A divider with a + mark where it meets the rule sets the panels apart. The rows keep the height of all eight (an unseen copy shares their grid cell), so changing category never moves the page. Below lg the navigation becomes a row of chips that scrolls sideways in its own band over the rows. It's built from Button, Badge and Guides, with your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the categories and the releases?
Edit CATEGORIES and RELEASES at the top of the file. A category names the kind of release it holds (All holds every kind), and each release has a kind; the counts in the navigation and the line above the rows are counted from the releases.
Is the navigation real links?
No: the choices narrow the list in place, so they are buttons inside a labelled nav, with aria-current="true" on the current one. For categories that live at their own addresses, swap the buttons for links and set aria-current="page".
Why doesn't the block get shorter when I change category?
So nothing below it jumps. The shown rows and an unseen, inert copy of all eight share one grid cell, and the cell is as tall as the copy. Shorter categories leave quiet space under the last row, on purpose.
Is it the same on every React base and port?
Yes in look and behaviour.
The category buttons take an onClick handler.
How does it fit on a phone and in a right-to-left layout?
Below lg the navigation is a single row of rounded chips that scrolls sideways inside its own band, with the current chip outlined in the foreground colour, and the rows sit under it; nothing else scrolls at 320 pixels. In a right-to-left layout the panels swap sides, the current marker moves to the other edge and versions and counts keep their reading order.
Related
- Pro
Split View Changelog
Filters and browsingA docs reader's release notes as master and detail in one frame: a listbox of six releases at the start, the chosen release's article at the end and Previous and Next buttons, on a height that never changes.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- Pro
Tag Cloud Changelog
Filters and browsingA framed cloud of nine topic toggles sized by how many releases carry them, with multiple choice, a live line naming what shows, a Clear button and eight release rows on a height that never changes.
- Pro
Version Tabs Changelog
Filters and browsingAn app platform's last four versions as compact monospace chip tabs on a window's top edge, each panel listing its changes with type tags in two columns of cells, on a height that never changes.
- Pro
Grouped Date Changelog
Lists and timelinesChanges grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.