--- title: "Tabs UI: anatomy, variants and examples | Kombai" description: "Tabs are a row of labels that switch between views of related content, showing one panel at a time on the same page." canonical_url: https://kombai.com/glossary/tabs/ author: "The Kombai Team" --- # Tabs Tabs are a row of labels that switch between views of related content, showing one panel at a time on the same page. - Also called: tab bar, bottom navigation - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/tabs/), [150 mobile designs](https://kombai.com/gallery/mobile/tabs/) - [Credit ยท Remontoir](https://kombai.com/gallery/inspirations/tabs-web-28/) (Web) - [Tendwell](https://kombai.com/gallery/inspirations/tabs-ios-114/) (Mobile) - [Kestrel](https://kombai.com/gallery/inspirations/tabs-ios-86/) (Mobile) ## What are tabs? Tabs are a set of labels, each tied to a panel of content. Selecting a label shows its panel in the same spot and hides the others, so related views share one space without a page load. On phones, a tab bar along the bottom does the same job for the main sections of an app. - The selected tab is marked with an underline, a fill or bolder text. - Only one panel shows at a time, right below or beside its tabs. ## When to use tabs - **Peer views of one thing.** Overview, Activity and Settings for the same project or person. - **Content people switch between.** Followers and following, or upcoming and past bookings. - **Main sections on phones.** A bottom tab bar for Home, Search, Inbox and Profile. ## When not to use one - **Steps in order.** For a sequence people must finish, use a stepper or a wizard. - **Comparing panels.** Only one tab shows at a time. Put things people compare side by side. - **Actions.** A tab shows content. To run an action, use a button or a toolbar. ## Anatomy 1. **Tab list**: The row that holds the tabs 2. **Tab**: One short label per panel 3. **Indicator**: Marks the selected tab 4. **Panel**: Content for the selected tab 5. **States**: Selected, unselected, focus, count ## Variants We sorted every tabs design in the Kombai gallery and found six patterns. ### 1. Underlined tabs The default. Plain text labels with a line under the selected one, often across a settings page or a sheet. - [Dunnock](https://kombai.com/gallery/inspirations/tabs-web-18/) (Web) - [Wrenmoor](https://kombai.com/gallery/inspirations/tabs-web-50/) (Web) - [Fernquill](https://kombai.com/gallery/inspirations/tabs-ios-6/) (Mobile) ### 2. Tabs with icons or counts An icon or a number beside each label, like Drafts 0 or 94 Followers, so people see what each tab holds. - [Rhumb](https://kombai.com/gallery/inspirations/tabs-web-20/) (Web) - [Strideloft](https://kombai.com/gallery/inspirations/tabs-ios-21/) (Mobile) - [Nolvara](https://kombai.com/gallery/inspirations/tabs-ios-10/) (Mobile) ### 3. Pill tabs The selected tab sits in a filled or outlined pill, which reads well on busy or colored backgrounds. - [Quillbrook](https://kombai.com/gallery/inspirations/tabs-web-30/) (Web) - [Bexholt](https://kombai.com/gallery/inspirations/tabs-ios-37/) (Mobile) - [Larkspur](https://kombai.com/gallery/inspirations/tabs-ios-122/) (Mobile) ### 4. Scrolling tab rails More tabs than fit the width, in a row that scrolls sideways. The cut-off last label hints that there is more. - [Northfell](https://kombai.com/gallery/inspirations/tabs-ios-75/) (Mobile) - [Halden Robotics](https://kombai.com/gallery/inspirations/tabs-ios-63/) (Mobile) - [Aventro](https://kombai.com/gallery/inspirations/tabs-ios-31/) (Mobile) ### 5. Segmented tabs Tabs drawn as one rounded track with the selected segment raised, common at the top of iOS sheets. - [Crateful](https://kombai.com/gallery/inspirations/tabs-ios-1/) (Mobile) - [Bindwell](https://kombai.com/gallery/inspirations/tabs-ios-8/) (Mobile) - [Novalind](https://kombai.com/gallery/inspirations/tabs-ios-17/) (Mobile) ### 6. Bottom tab bars Four or five icons with short labels along the bottom of a phone screen, one per main section, sometimes with a badge. - [Bramble](https://kombai.com/gallery/inspirations/tabs-ios-132/) (Mobile) - [Craftline](https://kombai.com/gallery/inspirations/tabs-ios-101/) (Mobile) - [Eldrin Pantry](https://kombai.com/gallery/inspirations/tabs-ios-49/) (Mobile) ## Where tabs show up ### Settings Profile, Billing, Security and API keys as tabs across the top of one settings page. - [Perihelia](https://kombai.com/gallery/inspirations/tabs-web-10/) (Web) - [Firnline](https://kombai.com/gallery/inspirations/tabs-web-34/) (Web) - [Weftly](https://kombai.com/gallery/inspirations/tabs-web-14/) (Web) ### Profiles and records Posts, followers and activity for one person, or summary and tasks for one project. - [Rookvale](https://kombai.com/gallery/inspirations/tabs-web-38/) (Web) - [Betony](https://kombai.com/gallery/inspirations/tabs-web-16/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/tabs-ios-88/) (Mobile) ### Search results Tabs under the search box split results by type, like posts, people and boards. - [Skeinpost](https://kombai.com/gallery/inspirations/tabs-web-11/) (Web) - [Umbriel](https://kombai.com/gallery/inspirations/tabs-web-6/) (Web) - [Curio](https://kombai.com/gallery/inspirations/tabs-ios-139/) (Mobile) ### Dialogs Upload, Link and Camera, or Pending and Members, without opening a second dialog. - [Cindermoss](https://kombai.com/gallery/inspirations/tabs-web-36/) (Web) - [Sablecourt](https://kombai.com/gallery/inspirations/tabs-web-42/) (Web) - [Marrowfield](https://kombai.com/gallery/inspirations/tabs-web-44/) (Web) ## Tabs vs similar components | | [Tabs](https://kombai.com/glossary/tabs/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | [Accordion](https://kombai.com/glossary/accordion/) | [Navbar](https://kombai.com/glossary/navbar/) | |---|---|---|---|---| | Switches | Panels of content | A view or a value | Sections open in place | Pages of the site | | Shows | One panel at a time | The same content, changed | Any number of sections | Links to every top section | | Best for | Peer views of one thing | Filters and display modes | Long, skimmable content | Moving between sections | ## Build notes - Use role="tablist" on the row, role="tab" on each tab and role="tabpanel" on each panel. - Set aria-selected on the selected tab, and point its aria-controls at its panel. - Left and Right arrows move between tabs, Home and End jump to the first and last. - Keep only the selected tab in the Tab order, so Tab moves on into the panel. - Show the panel on focus when it is ready instantly. Wait for Enter or Space when it has to load. - Keep a bottom tab bar visible, and use it for sections, never for actions. ## FAQ ### What's the difference between tabs and a segmented control? Tabs switch between panels of different content, like Overview and Settings. A segmented control picks a view or a value for the same content, like Day, Week and Month on a calendar. Many iOS sheets in the gallery draw their tabs as a segmented control, but the job is still tabs. ### Should tabs be buttons or links? Use buttons with the tab role when they swap panels on the same page. When each tab has its own URL, like the sections of a settings area, use links in a nav element and mark the current one with aria-current. Links also give every view its own address and a working back button. ### How many tabs is too many? When they no longer fit on one line. On the web, let the row scroll sideways or move the rest into a More menu. For phone tab bars, Apple's guidelines advise against overflow tabs, because content behind a More tab is harder to reach and notice. ### Do tabs hurt SEO? Not when every panel is in the HTML and only hidden with CSS or the hidden attribute. Search engines can read the content of tabs that are not selected. Problems start only when a panel loads its content after a click. ## Related terms - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Accordion](https://kombai.com/glossary/accordion/) - [Side navigation](https://kombai.com/glossary/side-navigation/) - [Navbar](https://kombai.com/glossary/navbar/) ## References - [WAI-ARIA Authoring Practices: Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) - [Apple Human Interface Guidelines: Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) - [MDN: ARIA tab role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role)