About this set
Multi-level sidebar menus built on the native details and summary elements, so they open and close without any JavaScript. Accordion groups is a store admin three levels deep: Catalog opens to Products, Collections, Price lists and an Inventory group that opens again to Stock levels, Transfers and Suppliers. Nested links hang off a guide line under the parent icon, the current page gets an orange marker on that line, and the parent that contains it turns bold through :has(). File tree is a CMS explorer in monospace type, with folders as details, files as links, dashed guide lines and a highlighted current file. Exclusive accordion is a settings sidebar whose sections share a name attribute, so opening one closes the one before it, and the open section lifts onto a white card. Use the accordion for admin menus with a few deep branches, the tree for file-like content, and the exclusive version when only one group should be open at a time. Chevrons rotate from the open attribute, which the browser keeps in sync with the state it announces.
What’s included
- Native details and summary, no JavaScript
- Three levels deep with guide lines and a current-page marker
- Parent of the current page highlighted with :has()
- Monospace file tree with folders and files
- Exclusive accordion through the details name attribute
Accessibility
Every group header is a summary element, so it is reached with Tab, toggled with Enter or Space, and announced with its expanded or collapsed state. Links inside use aria-current="page" for the current item, each sidebar is a nav with its own label, and focus shows a 2px outline on summaries and links alike. Chevron and background transitions stop under prefers-reduced-motion.
Customise it
Colours live in the --nm-*, --ft-* and --xa-* custom properties; indentation is the margin and padding on .nm-sub and on nested .ft lists. Bootstrap reuses them on .nav and .nav-link, and Tailwind uses named groups (group/l1, group/l2) so each chevron follows only its own details.
