Nav List

The links of a sidebar: the main way around an app (Inbox, Projects, Settings), or a settings page's sections (Profile, Account, Billing). It is navigation: links in lists, the keyboard of any page (Tab), no menu or tree roles. Specification: docs/components/nav-list.md

Basics

A <nav class="canon-nav-list">, named, holding lists of .canon-nav-list-item links: an icon, a .canon-nav-list-label, an optional Tag right after it ("New", "Beta": one word, for a page that is new or changing, removed once it isn't) and an optional Count at the end. A .canon-nav-list-heading before a list names its group. aria-current="page" marks where people are.

Sections

An item with sub-pages is a <details class="canon-nav-list-section">: its <summary class="canon-nav-list-item"> opens and closes the list of sub-pages under it, without JavaScript. canon.js opens the section holding the current page, and marks its summary while it's closed, so people still see where they are. One level deep: deeper trees are a Tree View.

Row actions

A Button after a link is that row's action ("New project"): minimal, neutral, icon only and small, at the row's end. It shows while the pointer is on the row or focus is in it (always on touch screens), and it is a stop of its own for Tab.

Rail

data-display="icon" on the list or a container (a collapsed Sidebar): square items, icons only. Labels, headings and counts stay as names for screen readers; give each link a Tooltip (interestfor, data-placement="inline-end", beside the icon) so sighted people can read them too (they show only in a rail). A section's sub-pages open beside it, labels and all: click Projects. They close when you choose one, press Esc, or click or Tab elsewhere.

Size

data-size on the list or a container: rows a control's height, a quarter of it apart. A sidebar uses the default; small suits a dense one.

Edge cases

A long label is cut (…) and keeps its full name. Right to left, icons are on the right and a closed section's chevron points left.