React sidebar navigation components

The collapsed state is where sidebars break. An icon-only rail saves maybe 200px of width and costs your users the ability to identify anything they have not already learned, so if you collapse by default you need tooltips on hover and an accessible name on every link. Put the label in the button as visually hidden text or use aria-label, because a link whose only content is an SVG announces as nothing useful. The hover-to-expand sidebar here sidesteps some of this by revealing real labels rather than tooltips, which I prefer.

Keyboard behaviour deserves ten minutes of deliberate testing. Tab through the whole rail and confirm the focus ring is visible against your background, that collapsed groups do not leave hidden links in the tab order, and that the collapse toggle exposes aria-expanded. Mark the current page with aria-current="page" rather than only a background colour, since colour alone tells a screen reader nothing. If your sidebar has more than about fifteen destinations, a roving tabindex with arrow-key movement starts to beat plain tabbing.

Persisting the open state is worth it and slightly annoying in Next.js. Reading localStorage during render throws on the server, and reading it in an effect gives you a visible flash where the sidebar snaps from expanded to collapsed after hydration. The two fixes that work are storing the preference in a cookie so the server renders the right width immediately, or writing a class onto the html element from a small blocking script before paint. The grouped sidebar here uses localStorage, so plan for that flash if your default and stored states differ.

On mobile a sidebar should stop being a sidebar. Below the medium breakpoint, turn it into an overlay drawer with a backdrop, trap focus inside it while it is open, close it on escape and on route change, and lock body scroll. Keep the nav element scrollable independently of your main content too, otherwise a long link list drags the whole page around on short viewports.