Sidebar design

Sidebars appear to the right or left of the content when they fit, or collapse into a content header or footer on narrow screens.

Sidebars can be implemented as a region in the page template, configured in the block layout.

Sidebars could also be implemented in a layout or another component.

A convention that could be used is using the left sidebar for global blocks, and the right sidebar for content specific blocks.

Here is MDN, a good example.

MDN sidebar layout

And vite

Vite docs sidebar layout

Here is the tab order for MDN.

Notice that it goes from the header and menu to the content header, right sidebar, content, then left sidebar.

Mozilla developer network layout tab order

Tab order for drupal.org project.

Drupal.org project tab order

Here is the reddit layout, with a fixed width sidebar that can be collapsed to the side at full width, and completely hidden and toggled with a header button on mobile.

Tab navigation is quite bad on the side, with the nav button not appearing on desktop, and the search bar trapping focus.

Reddit sidebar nav narrow
Reddit sidebar nav wide

The new navigation module already works like this!

Drupal navigation module full width fixed
Drupal navigation module overlaid over content

Consider the admin UX who will see the navigation menu, plus the site sidebar.