--- title: "Item Indicator | GoodBarber's Design System" description: "The Item Indicator marks the selected entry of a navigation in GoodBarber apps: a dot, a line or a tiny mark, visible only on the active item." canonical_url: "https://www.goodbarber.com/uxdesign/item-indicator/" lang: fr --- # Item Indicator | GoodBarber's Design System [Design System](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://fr.goodbarber.com/uxdesign/](https://fr.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://fr.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 Indicator UI Elements The Item Indicator is the visual marker of the selected entry of the navigation: a dot, a tiny mark or a line, displayed only in the selected state. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-indicator.a94c21abfda9.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-indicator.a94c21abfda9.mp4) ## 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](/uxdesign/item/) may contain, with the [Item Icon](/uxdesign/item-icon/) and the [Item Label](/uxdesign/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](/uxdesign/item/). The line adapts to the content. All indicator types use a round shape by default, to ensure smooth edges and visual harmony. ![The three types of indicator: dot, tiny and line](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Anatomy-Types.b79d487a35f2.png) *The three types of indicator: dot, tiny and line* ## Properties ### Position The indicator can be displayed at the top or at the bottom of a vertical [item](/uxdesign/item/), and on the left or on the right of a horizontal one. On tablet and desktop, it is displayed next to the [label](/uxdesign/item-label/). ![The positions of the indicator, on vertical and horizontal items](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Properties-Position.c9cc227b1534.png) *The positions of the indicator, on vertical and horizontal items* ### Color The indicator adapts in color, as it does in shape and in position. ![The indicator has its own color](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Properties-Color.0681474ea36c.png) *The indicator has its own color* ## Behavior ### Selected state The indicator is displayed only in the selected state of the [Item](/uxdesign/item/), and remains hidden in the default state. ![The indicator appears on the selected entry only](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Behavior-Selected.e884012ed9d5.png) *The indicator appears on the selected entry only* ### 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. ![Each indicator type has its own selection animation](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Behavior-Animations.68b1464bda64.gif) *Each indicator type has its own selection animation* ### Indicator or item style The background of a selected [Item](/uxdesign/item/) comes from the [Background](/uxdesign/background/) component, which may change according to the state of the Item. Its outline comes from the [Border](/uxdesign/atom-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. ![An indicator, a filled selected state and a border on the selected state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIndicator-Behavior-Distinction.1416851676e3.png) *An indicator, a filled selected state and a border on the selected state*