Tabs
/TABZ/ · noun · NAV pattern · #075
A row of labels across the top of a section, each opening its own panel in the same spot. Peers only — if one tab makes no sense without another, they belong on one page.
Also called: top tabs, tabbed interface, tab strip, tab navigation.
You might call it
- “the tabs at the top of a page”
- “the labels you click to switch sections”
- “the underlined headings that switch content”
- “top tabs in an app”
- “tabbed sections on a website”
…its name is Tabs.
Common questions
What are tabs in UI design?
Tabs are a row of labels that each open a different panel in the same area, so people can switch between related views without leaving the page — like Overview, Reviews and Specs on a product page. Only one panel shows at a time, and the selected tab is marked.
Tabs vs tab bar: what is the difference?
Tabs sit at the top of a section and switch panels within one screen. A tab bar sits at the bottom of a phone app and switches between the app’s main destinations, such as Home, Search and Profile. On iPhone, Apple’s “tab bar” is the bottom one; Material Design calls the top kind tabs.
In code
| SwiftUI / UIKit | No top-tab component — TabView and UITabBarController are the bottom tab bar; Apple uses a segmented control here |
|---|---|
| Jetpack Compose | PrimaryTabRow Tab HorizontalPager |
| Android (Views) | TabLayout ViewPager2 TabLayoutMediator |
| Flutter | TabBar TabBarView DefaultTabController |
| Web (HTML / ARIA) | role="tablist" role="tab" role="tabpanel" aria-selected |
Prompt for your AI coding tool
Add tabs to this section: a row of short labels across the top, one per panel, with the selected tab clearly marked (an underline or filled background) and only its panel shown below. Follow the ARIA tabs pattern — role="tablist", role="tab" with aria-selected and aria-controls, role="tabpanel" — so arrow keys move between tabs and Tab moves into the panel. Keep the tabs to peers of the same kind, and let the row scroll sideways on small screens instead of wrapping.
More UI words to use when vibe coding →