use UI

Tab Bar vs Tabs

The shared name is the entire problem. Tabs swap panels inside one page: each tab controls a `tabpanel`, the arrow keys move between them, and the URL need not change. A tab bar is the row of destinations at the bottom of a phone app, and following one is a navigation — a different screen, a different address, focus moving to the new heading. Because they look similar and are named alike, tab bars regularly ship with `role="tablist"`, which tells a screen reader user to expect panels that are never coming and hands them an arrow-key model nothing implements.

Swapping panels on the same page is tabs. Moving between top-level places is a tab bar — links in a nav, never a tablist.

Tab Bar

A fixed row of top-level destinations at the bottom of a small screen.

Reach for it when

  • A phone-sized app has three to five top-level areas people switch between constantly.
  • The areas are equally important — none of them is a sub-section of another.
  • Switching should preserve where you were: coming back to a tab returns you to what you were doing in it.

Avoid it when

  • There are more than five destinations. A “More” tab hiding six others is a menu that lost an argument.
  • The screen is wide. On desktop this is a sidebar or a header nav; a bottom bar there is 60px of wasted chrome.
  • The items are actions rather than places. A row of buttons at the bottom is a toolbar, not navigation.

Tabs

A set of labelled panels occupying the same area, where selecting a label reveals its panel and hides the others.

Reach for it when

  • The content splits into related but genuinely separate sections — Overview, Activity, Settings.
  • The user needs one section at a time and switching is occasional rather than constant.
  • There are two to six sections with short, predictable labels.
  • Each section is substantial enough to deserve its own space; tabs over three lines of text each is overhead.

Avoid it when

  • The user needs to compare what is in two panels. Anything hidden cannot be compared, and they will switch back and forth trying.
  • The sections are steps in a sequence. That is a stepper — tabs imply you may visit them in any order.
  • There are more than about six, or the labels are long. Scrolling or wrapping tabs stop reading as one row and start reading as noise.
  • The content is short enough to stack. Two paragraphs behind two tabs is worse than four paragraphs on a page.
  • The panels are the same content shown differently. That is a segmented control.