--- title: "TabBar" description: "The TabBar is a navigation component for GoodBarber apps: one configurable system that generates every layout, consistent on mobile, tablet and desktop." canonical_url: "https://www.goodbarber.com/uxdesign/tabbar/" lang: en --- # TabBar [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 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/) # TabBar UI Components The TabBar gives direct access to the key sections of the app, as a bottom bar on mobile and tablet, and as a side rail on desktop. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/tabbar.1f4c12bb96ee.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/tabbar.1f4c12bb96ee.mp4) ### Introduction The TabBar is a new generation of navigation. It is not a set of fixed templates: it is a system of structured elements described by a single configuration. Each layout is generated by changing a few key properties, so every variation shares the same structure and behaves consistently on every device. In the GoodBarber design system, the TabBar is the component users interact with the most. It is designed to stay clear and reachable in every context: anchored at the bottom of the screen on mobile and tablet, and displayed as a vertical rail on desktop. ### Anatomy The TabBar is built on three levels. Each level has its own role, and together they are described by one configuration. ![The three levels of the TabBar, and the distinct tab](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Anatomy.0c5ab4720176.png) *The three levels of the TabBar, and the distinct tab* #### Container The Container is the outer layer. It sets the position of the TabBar on the screen, carries the background and its effects, such as [blur](/uxdesign/atom-blur/) or [gradient](/uxdesign/atom-gradient/), defines the scroll behavior, and manages the spacing with surrounding components like the mini player or the floating button. ![The Container: the outer layer and the spacing it manages](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Anatomy-Container.5d2f7c3f2db5.png) *The Container: the outer layer and the spacing it manages* #### Bar The Bar is the structure. It holds and distributes the navigation entries, and carries the surface of the component: [background](/uxdesign/background/), border, [shape](/uxdesign/atom-shape/) and [shadow](/uxdesign/atom-shadow/). The indicator that marks the selected entry is also carried at the Bar level. ![The Bar: the structure and its surface](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Anatomy-Bar.24bcda4f3d39.png) *The Bar: the structure and its surface* #### Item The Item is the interactive unit of the navigation: an icon, a label, or both, with an indicator when the item is selected. Each part of the Item is an element of its own and is described separately. ![The Item: its parts, spacing and orientation](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Anatomy-Item.e8b6873bfa97.png) *The Item: its parts, spacing and orientation* #### Distinct tab The distinct tab is an Item moved outside the Bar: a highlighted entry, rendered with the button palette of the app theme. It always matches the height of the Bar, and sits next to it on mobile, or above it on desktop. ![The distinct tab: a highlighted entry, always at the height of the Bar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Anatomy-DistinctTab.2125e8f9adb8.png) *The distinct tab: a highlighted entry, always at the height of the Bar* ### Properties #### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the whole component, consistently: the Bar, the items and the distinct tab share the same corner style, from **Sharp** to **Full-round**. ![The corner styles applied to the TabBar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Shape.c2dd4e470f79.png) *The corner styles applied to the TabBar* #### Border The Bar can draw a border around its surface, following the [Border](/uxdesign/atom-border/) atom. Its color is configurable, to detach the navigation from the content behind it. ![The Border atom on the Bar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Border.e31d6085e9a2.png) *The Border atom on the Bar* #### Shadow The shadow lifts the Bar above the content and anchors the navigation visually. It follows the [Shadow](/uxdesign/atom-shadow/) atom, consistently with the other floating components of the app. ![The Shadow atom on the Bar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Shadow.b2ea69057753.png) *The Shadow atom on the Bar* #### Size The element size comes in three values: **Compact, Standard and Large**. The size sets the scale of the whole component: icons, labels and the height of the Bar adapt together, per device. ![The three element sizes](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Size.84e5b43a2944.png) *The three element sizes* #### Background effects The background of the TabBar can detach the navigation from the content, at two levels: the Container behind the whole component, and the Bar itself. **On the Container** — a solid color, a [gradient](/uxdesign/atom-gradient/), or a [blur](/uxdesign/atom-blur/) that lets the content show through. Blur effects are available on every app output. ![Solid color, gradient and blur on the Container](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Background-Container.f30f33ad17c6.png) *Solid color, gradient and blur on the Container* **On the Bar** — the surface of the Bar takes the same effects: solid, gradient, or blur, revealing the content behind the pill. ![Solid color, gradient and blur on the Bar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-Background-Bar.7907636d968a.png) *Solid color, gradient and blur on the Bar* #### On-scroll behavior The TabBar can stay **fixed** and always visible, or **hide** when the user scrolls down and reappear when scrolling back up. ![Fixed, or hidden on scroll](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Properties-OnScroll.d63b1fb1acd4.png) *Fixed, or hidden on scroll* ### Layout #### Filling The filling defines how the Bar occupies the width of its container. With **fit**, the Bar hugs its content and each item takes its own width. With **stretch**, the Bar fills the whole width and every item shares it equally. **Edge to edge**, the Bar spans the screen from side to side. ![Fit, stretch and edge to edge](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Layout-Filling.e9d99326b021.png) *Fit, stretch and edge to edge* #### By device On mobile and tablet, the TabBar is anchored at the bottom of the screen. On desktop, it becomes a vertical rail on the left side of the navigation area, with the distinct tab above the Bar. ![The TabBar by device: bottom bar and side rail](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-TabBar-Layout-Devices.674e20beb3c8.png) *The TabBar by device: bottom bar and side rail* #### With other components The Container manages the spacing between the TabBar and the transversal components of the app, such as the mini player or the floating button, so the navigation stays stable whatever the page shows. #### Overflow On mobile, the TabBar shows up to four entries, the distinct tab included. When the app has more sections, the extra entries move to the More menu, the natural extension of the TabBar, which is described separately.