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.

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 or gradient, defines the scroll behavior, and manages the spacing with surrounding components like the mini player or the floating button.

Bar

The Bar is the structure. It holds and distributes the navigation entries, and carries the surface of the component: background, border, shape and shadow. The indicator that marks the selected entry is also carried at the Bar level.

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.

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.

Properties

Shape

The 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.

Border

The Bar can draw a border around its surface, following the Border atom. Its color is configurable, to detach the navigation from the content behind it.

Shadow

The shadow lifts the Bar above the content and anchors the navigation visually. It follows the Shadow atom, consistently with the other floating components of the app.

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.

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, or a blur that lets the content show through. Blur effects are available on every app output.

On the Bar — the surface of the Bar takes the same effects: solid, gradient, or blur, revealing the content behind the pill.

On-scroll behavior

The TabBar can stay fixed and always visible, or hide when the user scrolls down and reappear when scrolling back up.

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.

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.

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.