--- title: "Item | GoodBarber's Design System" description: "The Item is the structural unit of navigation in GoodBarber apps: an independent block that can contain an icon, a label and an indicator." canonical_url: "https://www.goodbarber.com/uxdesign/item/" lang: en --- # Item | GoodBarber's Design System [Design System](https://www.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://www.goodbarber.com/uxdesign/](https://www.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://www.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Label](/uxdesign/item-label/) * [Item Indicator](/uxdesign/item-indicator/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Item UI Elements The Item is the structural unit of navigation: an independent block for each entry, which can contain an icon, a label and an indicator. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item.283cc06067df.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item.283cc06067df.mp4) ## 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](/uxdesign/item-icon/), an [Item Label](/uxdesign/item-label/) and an optional [Item Indicator](/uxdesign/item-indicator/). It can be used in the navigation contexts of the app, such as the [TabBar](/uxdesign/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](/uxdesign/button/), which carries a call to action. ## Anatomy ### Child elements An Item may contain the following child elements: an [Item Icon](/uxdesign/item-icon/), an [Item Label](/uxdesign/item-label/) and an [Item Indicator](/uxdesign/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. ![The child elements of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Anatomy-ChildElements.6a50a971d2fc.png) *The child elements of the Item* ### Compositions The Item supports multiple display configurations. The visibility of each child element is controlled individually, which allows flexible compositions, such as an [icon](/uxdesign/item-icon/) with a [label](/uxdesign/item-label/), an icon alone or a label alone. ![Icon and label, icon alone, label alone](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Anatomy-Compositions.3fc2c95cb4e6.gif) *Icon and label, icon alone, label alone* ### Spacing The spacing is the distance between the child elements: the [icon](/uxdesign/item-icon/), the [label](/uxdesign/item-label/) and the [indicator](/uxdesign/item-indicator/). It can be set per device, and the selected state can change it. ![The spacing between the child elements of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Anatomy-Spacing.24c9bc02c7cc.png) *The spacing between the child elements of the Item* ## Properties The Item uses the [Background](/uxdesign/background/) component and the [Border](/uxdesign/atom-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](/uxdesign/atom-shape/) atom, from **Sharp** to **Full-round**. ![The corner styles applied to the surface of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Properties-Shape.36ffa40098c6.png) *The corner styles applied to the surface of the Item* ### Border The [Border](/uxdesign/atom-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. ![The Border atom on the surface of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Properties-Border.8298b30b301d.png) *The Border atom on the surface of the Item* ### Shadow The Item can receive the values of the [Shadow](/uxdesign/atom-shadow/) atom. ![The Shadow atom on the surface of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Properties-Shadow.a6a40caefada.png) *The Shadow atom on the surface of the Item* ### Background The [Background](/uxdesign/background/) component manages the surface of the Item. It supports [flat colors](/uxdesign/atom-color/), [gradients](/uxdesign/atom-gradient/) or [blur](/uxdesign/atom-blur/), and it can change with the state of the Item. ![Flat color, gradient and blur on the surface](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Properties-Background.face86152898.png) *Flat color, gradient and blur on the surface* ### Size The Item can receive size values defined by the dimension atoms of the design system. ![The Item in the three sizes of the navigation](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Properties-Size.d940b900cf9c.png) *The Item in the three sizes of the navigation* ## Layout ### Orientation The orientation defines the stacking direction of the child elements, vertical or horizontal. It is set per device: mobile, tablet and desktop. ![The vertical and horizontal orientations](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Layout-Orientation.f9c143daddf9.png) *The vertical and horizontal orientations* ### 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. ![The padding of the Item and the clickable area it defines](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Layout-Padding.04ae39b6fcf2.png) *The padding of the Item and the clickable area it defines* ## Behavior ### States The Item has two states: **default** and **selected**. The selected state can change the [background](/uxdesign/background/), the [border](/uxdesign/atom-border/), the [shape](/uxdesign/atom-shape/), the [shadow](/uxdesign/atom-shadow/), the [icon](/uxdesign/item-icon/), the [label](/uxdesign/item-label/), the orientation, the padding and the spacing. The [indicator](/uxdesign/item-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. ![The default and selected states of the Item](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Item-Behavior-States.04895b1ff0bb.png) *The default and selected states of the Item*