Navigation

Moving around: the home link, pages of the site, views of the same content, steps of a flow.

Pattern

nav.*

Component

<Action>

Intents

View as Markdown

Intents

nav.home<a>

The site or product name, linking to the home page

nav.page<a>

A link to a top-level page in site navigation. Pass current on the page you are on

nav.area<a>

A link to one area of the site that has its own sidebar: Docs, Reference. Pass current on the open one; it is marked by full-strength text, with no underline

nav.entry<a>

The name of an entry in an index or table, linking to its page: an intent in the vocabulary list

nav.item<a>

The title of an item in a collection, opening its page. The link covers the item, so the whole item can be pressed; give the item position: relative

nav.view<a>

Switches which view of the same content is shown: Following / For you, list / grid. Pass pressed on the active view

nav.dot<a>

One dot in a row over a photo that shows which of a set is open, and opens that one: the photos in a dialog.media. Pass current on the one shown, and a label like "Photo 2 of 5"

nav.step<a>

One step in a multi-step flow. Pass current on the active step

nav.paging<a>

One link in a layout.pager below a long list or table: a page number, Previous or Next. Pass current on the page shown

nav.sequel<a>

The previous or next page at the foot of a guide read in order, with an arrow pointing its way. Put the icon on the side it points to

Choosing a domain

Find the row that describes your case, and use the domain on the right.

If the problem is
Use
Titles that give a page its structure, from the marketing headline down to the title of one item.
heading.*
Running text and the small pieces around it: introductions, captions, labels, facts about an item, code.
text.*
Messages about what just happened or is happening. They are announced to screen readers.
feedback.*
Commands, named for what they do: save, delete, share. With an href they render a link, without one a button.
action.*
Moving around: the home link, pages of the site, views of the same content, steps of a flow.
nav.* this page
Picking from a small set shown all at once: options for a setting, filters, colours.
choice.*
What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.
field.*
Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement.
layout.*
Images that identify a person or illustrate content, with a text fallback when there is no image.
media.*
Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader.
dialog.*
Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail.
popover.*

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.