Introduction

The Item is the structural unit of navigation systems. It groups the child elements that define a single navigation entry, typically an Item Icon, an Item Label and an optional Item Indicator. It can be used in the navigation contexts of the app, such as the TabBar and its More menu, adapting automatically to the selected layout.

Each Item acts as an independent block, handling its own layout, its own state and its own style. Its configuration determines the visual density, the orientation and the hierarchy of the elements it contains.

An Item is a navigation entry: it leads to a section of the app. It is not an Action, which lets users interact with a piece of content (comment, share, add to favorites), nor a Button, which carries a call to action.

Anatomy

Child elements

An Item may contain the following child elements: an Item Icon, an Item Label and an Item Indicator, which is optional. Each one has its dedicated page: the icon represents the section or the action, the label displays the title or the name of the destination, and the indicator highlights the selected state.

Compositions

The Item supports multiple display configurations. The visibility of each child element is controlled individually, which allows flexible compositions, such as an icon with a label, an icon alone or a label alone.

Spacing

The spacing is the distance between the child elements: the icon, the label and the indicator. It can be set per device, and the selected state can change it.

Properties

The Item uses the Background component and the Border atom to define its visual surface. Together they define the surface style of the Item, and both can change with its state.

Shape

The Item can receive the values of the Shape atom, from Sharp to Full-round.

Border

The Border atom defines the outline applied around the Item. It can be used to increase the contrast, to separate the Items or to mark the selected state.

Shadow

The Item can receive the values of the Shadow atom.

Background

The Background component manages the surface of the Item. It supports flat colors, gradients or blur, and it can change with the state of the Item.

Size

The Item can receive size values defined by the dimension atoms of the design system.

Layout

Orientation

The orientation defines the stacking direction of the child elements, vertical or horizontal. It is set per device: mobile, tablet and desktop.

Padding and clickable area

The padding is the internal space within the Item, and it defines its clickable area. It can be set per device.

Behavior

States

The Item has two states: default and selected. The selected state can change the background, the border, the shape, the shadow, the icon, the label, the orientation, the padding and the spacing. The indicator is displayed only in the selected state, and remains hidden in the default state. The label color, the background, the border and the indicator can each mark the selected state, alone or combined. The title of the Item never changes with the state.