Lists, menus and navigation

Source: src/styles/parts/lists.scs — and controls::list, controls::list-item, controls::dl-list for a list inside a shadow root.

Five objects that look alike and are not: a list is rows of the same thing, a menu is navigation, a tree is a hierarchy, a table of contents says where the reader is, and breadcrumbs say where the page is. Each spends its emphasis differently.

Definition lists

The plain list

Rows of the same object: same edges, same inner padding, the recurring element always in the same place. .bordered gives the list its own frame.

The navigation menu

The current item is marked with aria-current — which is what a screen reader reads too — or with .selected where there is no url. .count sits at the end of every row, right aligned, and takes the brand ground on the current item.

The tree

A <details> per branch: the disclosure state is the browser's, not a class anyone has to track. The chevron is drawn on summary::before and rotates on [open].

The element that builds one from data is <mmo-tree>.

The table of contents

The rail marks where the reader is: the active item owns the line, not a background. .level-3 indents a second level and drops a step in size.

The shell builds this one for the page you are reading — see <mmo-toc>.

Breadcrumbs

Quiet all the way, except the last item: it is where you are, so it is the one in full text colour.

Pagination