Introduction

The Item Indicator is the visual marker used to highlight the selected state of a navigation entry. It provides an additional layer of feedback, to help users identify the section that is currently active. It is one of the child elements an Item may contain, with the Item Icon and the Item Label, and it is optional.

Anatomy

Types

The indicator can appear as a dot, a tiny mark or a line, positioned inside the item. The line adapts to the content. All indicator types use a round shape by default, to ensure smooth edges and visual harmony.

Properties

Position

The indicator can be displayed at the top or at the bottom of a vertical item, and on the left or on the right of a horizontal one. On tablet and desktop, it is displayed next to the label.

Color

The indicator adapts in color, as it does in shape and in position.

Behavior

Selected state

The indicator is displayed only in the selected state of the Item, and remains hidden in the default state.

Selection animations

When the selection changes, each indicator type animates in its own way: the dot and the line shrink on the previous entry and grow on the new one, while the tiny slides from one entry to the other.

Indicator or item style

The background of a selected Item comes from the Background component, which may change according to the state of the Item. Its outline comes from the Border atom, which can visually mark a selected state. The indicator is a marker of its own: a dot, a tiny mark or a line, positioned inside the item.