← All elements
<nav class="sb"><details open><summary>Components</summary><a>Buttons</a><a class="on">Cards</a><a>Loaders</a></details><details><summary>Guides</summary><a>Getting started</a></details></nav>About this accordion
A sidebar section that folds open with a rotating chevron and an indented list of sub-links.
How it works
Each group is a details element. The default marker is hidden and a rotated square with two borders forms a chevron that turns when open. Sub-links have a left border and the current one is highlighted.
Ways to customise it
- Add more groups.
- Change the highlight colour.
- Open the group you need with the open attribute.
Good to know
details and summary are keyboard accessible. Mark the current page with aria-current.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.