# Navigation

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

Pattern: `nav.*` (this page) · Component: [`<Action>`](https://www.prongs.dev/docs/components/action.md) · Intents: [10](#intents)

## Intents

| Intent | Status | Use it for |
|---|---|---|
| [`nav.home`](https://www.prongs.dev/docs/intents/nav/home.md) | `<a>` | The site or product name, linking to the home page |
| [`nav.page`](https://www.prongs.dev/docs/intents/nav/page.md) | `<a>` | A link to a top-level page in site navigation. Pass current on the page you are on |
| [`nav.area`](https://www.prongs.dev/docs/intents/nav/area.md) | `<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`](https://www.prongs.dev/docs/intents/nav/entry.md) | `<a>` | The name of an entry in an index or table, linking to its page: an intent in the vocabulary list |
| [`nav.item`](https://www.prongs.dev/docs/intents/nav/item.md) | `<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`](https://www.prongs.dev/docs/intents/nav/view.md) | `<a>` | Switches which view of the same content is shown: Following / For you, list / grid. Pass pressed on the active view |
| [`nav.dot`](https://www.prongs.dev/docs/intents/nav/dot.md) | `<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`](https://www.prongs.dev/docs/intents/nav/step.md) | `<a>` | One step in a multi-step flow. Pass current on the active step |
| [`nav.paging`](https://www.prongs.dev/docs/intents/nav/paging.md) | `<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`](https://www.prongs.dev/docs/intents/nav/sequel.md) | `<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.*`](https://www.prongs.dev/docs/intents/heading.md) |
| Running text and the small pieces around it: introductions, captions, labels, facts about an item, code. | [`text.*`](https://www.prongs.dev/docs/intents/text.md) |
| Messages about what just happened or is happening. They are announced to screen readers. | [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md) |
| Commands, named for what they do: save, delete, share. With an href they render a link, without one a button. | [`action.*`](https://www.prongs.dev/docs/intents/action.md) |
| 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.*`](https://www.prongs.dev/docs/intents/choice.md) |
| What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete. | [`field.*`](https://www.prongs.dev/docs/intents/field.md) |
| Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement. | [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) |
| Images that identify a person or illustrate content, with a text fallback when there is no image. | [`media.*`](https://www.prongs.dev/docs/intents/media.md) |
| Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader. | [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) |
| Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail. | [`popover.*`](https://www.prongs.dev/docs/intents/popover.md) |

## 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`.