[julien-deramond]

/cc @mdo This is a prototype to suggest an improvement for our sidebar. I'd like to have your opinion :)

-> Live preview quick access

---

The docs sidebar lists all 140 pages in one column, from Install down to the last utility. On a utility page, the current link sits under a hundred other entries, so the sidebar scrolls there on load and the rest of the docs is out of sight. Reaching another part of the docs means scrolling back up through everything, or knowing the page's name for the search.

This PR splits the sidebar into the seven sections sidebar.yml already defines with its section field: Getting started, Guides, Base, Forms, Components, Helpers and Utilities. The sections stay at the top of the sidebar, and only the pages of the current section are listed below them. Clicking a section opens its first page. A filter field between the sections and the pages narrows the list as you type.

375px, drawer open

Before	After

768px, drawer open

Before	After

1024px

Before	After

1440px

Before	After

All the screenshots are of the Margin page in light mode. The filter in use, with "border" typed under Utilities:

375px	1440px

A section of the sidebar holds between seven and 48 pages instead of 140, so the current page is usually visible without scrolling. The other sections are one click away at any time, on every page. Moving between sections is a page load, the same as following any other link. The page itself decides which section is open, so a shared link or a reload shows the same sidebar.

The filter matches page names and group names, without regard to case or accents. Typing "spacing" under Utilities keeps the whole Spacing group (Margin, Padding and Space), even though no page has that word in its name. Enter opens the first match, the down arrow moves into the results and Escape clears the field. It only searches the current section, and the docs search still covers the whole site.

On large screens, the sections and the filter stay pinned at the top of the sidebar while the pages scroll under them, with a short fade at the edge. In the drawer below 1024px, the sections become a compact grid (two columns on a phone, four on a tablet) so the pages keep most of the drawer's height. The header is pinned there too, because the drawer opens scrolled to the current page.

The markup lives in DocsSidebar.astro, which now groups sidebar.yml by section (the code calls each group a universe) and renders only the current one. The filter is a new sidebar-universes.js partial, about 80 lines with no dependency. The sections are plain links, so they work without JavaScript. The filter field needs it. I renamed the Getting Started section to Getting started to match the sidebar's sentence case. Nothing else read that field before.

One limit: a section opens on the first page sidebar.yml lists for it, so Base opens on Breakpoints and Utilities on the utility API. If another first page reads better, reordering sidebar.yml is enough.

The deploy preview shows it on any docs page, for example https://deploy-preview-43133--twbs-bootstrap.netlify.app/docs/6.0/utilities/margin/

---

TODO if moving forward with the prototype:

• Double-check all aspects of a11y
• Double-check the rendering and behavior at all breakpoints

🤖 Generated with Claude Code

[julien-deramond]

We could even think about having a max-height for the sidebar universe items to avoid having too many elements displayed at the same time on large breakpoints.