Condensed Density Navbar Block for React

The block keeps the choice in density and puts the text size and the gaps on the bar from it: text-xs with tight gaps for Compact, text-sm with wider gaps for Comfortable. The column is h-10 in both, so the height never changes; only the widths do, and the control sits at the end so it stays put. Store the choice (in a cookie or your settings) and read it back into START.

They are typed data at the top of the file (COUNTS): a label and a value each, in tabular figures so a changing number doesn't shift its neighbours. Feed them from your own data; if you update them on a timer, update a hidden live region at most when they cross a limit, not on every tick.

The links are in a nav named Main; the current one has aria-current="page". The density control is a group named Density with two toggles, each named for what it picks, and the pressed one is announced as on. The counts are a description list (a name and its figure). Arrow keys move between the two choices; Space or Enter picks one, and the group has no empty state.

Below the sm breakpoint the wordmark shrinks to its icon, the views show an icon each (the name stays for a screen reader) and the two density choices show icons only. The counts are hidden below lg. Nothing wraps at 320 pixels, and the bar stays 40 pixels tall.

Yes. The cells run from the right, the hairlines and plus marks sit on the correct edges, and the counts keep their figures in order. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the toggle group follows the page.

The text size and the gaps ease for a moment when you change density. With reduced motion they change at once. Nothing moves on load.