Navigation

Filters

Toggle buttons that narrow a long list, with the state kept in the address.

Examples

Filters and the first group (static: the script is not running here)Open “Filters and the first group (static: the script is not running here)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

The Bookshelf. Any long list with a few facets.

Live: Bookshelf.

Anatomy

Count: [data-shown]: “170 of 170 books”.
Box: details.filters-box: folds away on small screens.
Group: h2.filters-h (15/22, a label, not a large heading) and .filters-list of button[data-k][data-v][aria-pressed].
Reset: [data-reset] link-style button.
Empty: .shelf-empty with a reset.

States

Off: Hairline border, secondary ink.
On: aria-pressed="true": ink text, marker border (desktop: 2px marker on the left).
Hover: Ink, darker border.

Behaviour

Phone, tablet, desktop: Phone and tablet: chips that wrap, folded box. Desktop: sticky left column, vertical lists with a hairline, “← Index” at the top.
Motion: Colour 150ms. The list does not animate.

Accessibility

Real buttons with aria-pressed; the count is plain text. Without script the full list shows and the filters stay hidden.

Words

Filter names as the data uses them; counts with tabular numbers.

Code

Classes: .shelf-side .filters .filters-count .filters-box .filters-h .filters-list .filters-chips .filters-reset .shelf .books .book-t .book-m .book-fin .shelf-empty. Styles in site/assets/css/site.css.

<aside aria-label="Filter books" class="shelf-side">
<p class="rail-crumbs"><a href="/"><span><span aria-hidden="true">←  </span>Index</span></a></p>
<div class="filters">
<p aria-live="polite" class="filters-count"><span data-shown="">170</span> of 170 books</p>
<details class="filters-box" data-open-wide="" open="">
<summary>Filter books</summary>
<h2 class="filters-h">Status</h2>
<ul class="filters-list"><li><button aria-pressed="false" data-k="status" data-v="Reading" type="button">Currently reading (3)</button></li><li><button aria-pressed="false" data-k="status" data-v="Read" type="button">Read (114)</button></li><li><button aria-pressed="false" data-k="status" data-v="To Read" type="button">To read (53)</button></li></ul>
<h2 class="filters-h">Collection</h2>
<ul class="filters-list"><li><button aria-pressed="false" data-k="collection" data-v="All Time Favorites" type="button">All-time favourites</button></li><li><button aria-pressed="false" data-k="collection" data-v="First Time Leaders" type="button">First-time leaders</button></li><li><button aria-pressed="false" data-k="collection" data-v="Experienced Leaders" type="button">Experienced leaders</button></li><li><button aria-pressed="false" data-k="collection" data-v="Life Changing" type="button">Life-changing</button></li></ul>
<h2 class="filters-h">Genre</h2>
<ul class="filters-list filters-chips"><li><button aria-pressed="false" data-k="genre" data-v="Biography" type="button">Biography</button></li><li><button aria-pressed="false" data-k="genre" data-v="Business" type="button">Business</button></li><li><button aria-pressed="false" data-k="genre" data-v="Children's Fiction" type="button">Children’s fiction</button></li><li><button aria-pressed="false" data-k="genre" data-v="Communication" type="button">Communication</button></li><li><button aria-pressed="false" data-k="genre" data-v="Creativity" type="button">Creativity</button></li></ul>
<p class="filters-reset"><button data-reset="" type="button">Show all books</button></p>
</details>
</div>
</aside>
<section aria-labelledby="reading-h" class="sec shelf" data-group="Reading" id="reading">
<div class="sec-rule"></div>
<div class="sec-n" data-count="">03</div>
<h2 id="reading-h">Currently reading</h2>
<ul class="books">
<li data-collections="" data-genre="Philosophy" data-status="Reading"><a class="book-t" href="https://openlibrary.org/works/OL37826293W" rel="noopener noreferrer" target="_blank">Nexus</a><span class="book-m">Yuval Noah Harari · Philosophy</span></li>
<li data-collections="" data-genre="Philosophy" data-status="Reading"><a class="book-t" href="https://openlibrary.org/works/OL464662W" rel="noopener noreferrer" target="_blank">Zen Mind, Beginner’s Mind</a><span class="book-m">Shunryu Suzuki · Philosophy</span></li>
<li data-collections="" data-genre="Biography" data-status="Reading"><a class="book-t" href="https://openlibrary.org/works/OL39702197W" rel="noopener noreferrer" target="_blank">Autobiography of a Yogi</a><span class="book-m">Paramahansa Yogananda · Biography</span></li>
</ul>
</section>