--- title: "Item: the element that shapes every tab in your app" description: "The Item makes up every tab in your app's navigation: icon, label and indicator. Discover how we designed it." canonical_url: "https://www.goodbarber.com/blog/item-the-element-that-shapes-every-tab-in-your-app-a1624/" lang: en date: 2026-09-24 last_updated: 2026-09-24 --- # Item: the element that shapes every tab in your app [Back](/blog/make-it-r13/) # Item: the element that shapes every tab in your app Written by [Marie-Pierre Jeffard](https://www.goodbarber.com/blog/author/marie-pierre-jeffard/) on Thursday 24 September 2026 ## Every tab in your app's navigation relies on the same element: the Item, which can combine an icon, a label and an indicator. We designed it to shape our TabBars, today and tomorrow. It is now documented in the GoodBarber Design System. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98137931-68342870.jpg?v=1790245592.7487307) Your content is polished, your colors chosen. That leaves the navigation bar, which takes your users from one section to the next and weighs heavily on the impression your app makes. Each of its tabs is built on an element designed as a building block: the **Item**. In the [new generation of TabBar](https://www.goodbarber.com/blog/tabbar-here-comes-a-new-generation-a1497/), it is the Item that gives every navigation its character. ## An icon, a label, an indicator [The Item breaks away from its TabBar and reveals its child elements](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Within an Item, each element has its role. The icon represents the section, the label shows its name, and the indicator, which is optional, marks the active tab. Each one can be shown or hidden on its own, which gives three compositions: icon and label, icon only, label only. That is what sets the [Minimal TabBar](https://www.goodbarber.com/blog/minimal-tabbar-a-compact-icon-only-and-resolutely-modern-navigation-a1506/), all icons, apart from the [Clean TabBar](https://www.goodbarber.com/blog/clean-tabbar-a-text-only-subtle-and-elegant-navigation-a1512/), all text: the same element, composed differently. ## 17 properties for the TabBars of today and tomorrow ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98137931-68342872.jpg?v=1790245594.144737) To design a TabBar, our designers have 17 properties at hand: 8 for the Item, 6 for its icon and 3 for its label. The Item's surface takes a solid color, a gradient or a blur effect, a border, a shadow, square or rounded corners. Its layout sets its size, its orientation, its inner padding, which defines the touch area, and the spacing that lets its elements breathe. You don't need to adjust all of it. This range lets us compose complete TabBar layouts, in line with today's app design conventions: Bold, Minimal and Clean TabBar are the first three. As those conventions evolve, new layouts will grow out of the same element, without starting from scratch. So the TabBars we offer you always keep up with the times. In your back office, you choose your TabBar, then match it to your brand: tab size, corner radius, colors, label font, the way the active tab stands out. Your own icons can even sit alongside the system ones. ## Clear states, polished animations [Dot, Tiny, Line: the indicators and their selection animations](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) An Item has two states: default and selected. To set the active tab apart, it has four means, alone or combined: color, background, border and indicator. The indicator only appears on the selected tab, in three shapes: a dot (**Dot**), a short dash (**Tiny**) or a line (**Line**). Each shape has its own motion. The dot and the line shrink on the previous tab and grow on the new one, while the short dash slides from one to the other. When the selection relies on the background, as on the [Bold TabBar](https://www.goodbarber.com/blog/bold-tabbar-a-more-prominent-navigation-designed-to-structure-the-interface-a1502/), it is the colored background that moves. Short transitions that make every change easy to read, without overdoing it. ## The same Item, from mobile to desktop ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98137931-68342874.jpg?v=1790245595.7567441) The Item adapts its orientation, inner padding and spacing to every screen: mobile, tablet and desktop. At the bottom of a phone, the icon sits above the label. On desktop, the TabBar becomes a sidebar, and the Item can switch to horizontal to fit in. You set up your navigation once: each screen gets the version that suits it. ## The Item joins the Design System ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98137931-68342875.jpg?v=1790245597.4487517) After the [TabBar](https://www.goodbarber.com/uxdesign/tabbar/), the Item now has [its own page](https://www.goodbarber.com/uxdesign/item/) in the [GoodBarber Design System](https://www.goodbarber.com/uxdesign/), and it comes with its family. With the [Item Icon](https://www.goodbarber.com/uxdesign/item-icon/), the [Item Label](https://www.goodbarber.com/uxdesign/item-label/) and the [Item Indicator](https://www.goodbarber.com/uxdesign/item-indicator/), it opens a new category: the [UI Elements](https://www.goodbarber.com/uxdesign/ui-elements/), the building blocks of our components, each dedicated to a single role. To explore the Item in detail, head to [its Design System page](https://www.goodbarber.com/uxdesign/item/). And to see it in action, choose your TabBar in the Menu section of your back office. ![Marie-Pierre Jeffard](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) About the author[Marie-Pierre Jeffard](https://www.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer I'm a UI Designer at GoodBarber. App design system, components, layouts, website, illustrations, animations: everything I do revolves around the interface. What I love about our product is inventing universal rules that work on every screen and make room for every visual identity. The app becomes a showcase for your content. I love things that look simple, and all the invisible work it takes to get there: the rules, the choices and the constraints that make an interface hold together. That's what I write about here. [Read more](https://www.goodbarber.com/blog/author/marie-pierre-jeffard/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/marie-pierre-jeffard/)