Nav

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

On this page

Playground

Icons

Groups

Background

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

Work

Schedules
Tasks

Product

Settings

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

Work

Schedules
Tasks

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

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

Don’t

Schedules
Tasks

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.

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.

Nav