# Nav

The list of the product’s places, with the current place marked.

## Playground

```html
<nav class="feitio-nav" aria-label="Main"><div class="group"><p class="group-title">Work</p><ul><li><a href="#playground" aria-current="page">Schedules</a></li><li><a href="#playground">Tasks</a></li></ul></div></nav>
```

## When to use

-   Inside AppShell or DocPage, for the main places. Up to about seven entries per group.

## When not to use

-   **For actions** ("New schedule"): a Button, in the content.
-   **For the steps of a flow:** the count in the content ("Step 2 of 3").

## Examples

### With groups

The current place is placed paper: background, ink line and bold. Three signals, none color alone.

Show code

```html
<div class="feitio-nav">
  <div class="group">
    <p class="group-title" id="g-trabalho">Trabalho</p>
    <ul aria-labelledby="g-trabalho">
      <li><a href="/agendamentos" aria-current="page">…Agendamentos</a></li>
      <li><a href="/tarefas">…Tarefas</a></li>
    </ul>
  </div>
</div>
```

## Anatomy

1.  **Group title**, optional: when there is more than one group.
2.  **Current place:** placed paper, ink line and bold.
3.  **Other places:** underline on hover.

## Do and don’t

Do

-   [Schedules](#padroes)
-   [Tasks](#padroes)

The current place is a box with a line: readable on any screen, and without color.

Don’t

-   [Schedules](#padroes)
-   [Tasks](#padroes)

A colored side stripe and only the text color changing: machine-made look.

## Writing

-   The place’s name, as a noun, the same as the title of the screen it opens.

## Accessibility

-   A named `<nav>`; the current place with `aria-current="page"`.
-   With groups, each list takes the group title as its name.

## Attributes

Attribute

Values

What for

`class="feitio-nav"`

required

Groups `space-5` apart.

`class="group"`, `"group-title"`

optional

A titled group.

`aria-current="page"`

on the current place

Placed paper, ink line and bold.