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.