Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (2023)

Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (1)Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (2)

Tab bars help people understand the different types of information or functionality that a view provides. They also let people quickly switch between sections of the view while preserving the current navigation state within each section.

See Tab views for the similar component in macOS.

Best practices

Use a tab bar only to enable navigation, not to help people perform actions. A tab bar lets people navigate among different areas of an app, like the Alarm, Stopwatch, and Timer tabs in the Clock app. If you need to provide controls that act on elements in the current view, use a toolbar instead.

Make sure the tab bar is visible when people navigate to different areas in your app. The exception is a tab bar within a modal view. Because a modal view gives people a separate experience that they dismiss when they’re finished, hiding the view’s tab bar doesn’t affect app navigation.

Use the minimum number of tabs required to help people navigate your app. Each additional tab increases the complexity of your app, making it harder for people to locate information. Aim for a few tabs with short titles or icons to avoid crowding and causing tabs to truncate. In general, use three to five tabs in iOS; use a few more in iPadOS and tvOS if necessary.

(Video) Apple's MOST USEFUL Design Resource is STUNNING!! (2022 Edition)

Keep tabs visible even when their content is unavailable. If tabs are enabled in some cases but not in others, your app’s interface might appear unstable and unpredictable. When necessary, explain why a tab’s content is unavailable. For example, even when there is no music on an iOS device, the Listen Now tab in the Music app remains available and offers suggestions for downloading music.

Use concrete nouns or verbs as tab titles. A good tab title helps people navigate by clearly describing the type of content people find when they select the tab. Consider nouns for category titles like Music, Movies, TV Shows, and Sports, and verbs or short verb phrases for things related to time or peoples’ perspectives on the content (like Watch Now or For You).

Be cautious of overcrowding tabs with functionality. Tabs represent an app’s menu of options. Tabs titled “Home” tend to be too large in scope for an app. Aim to create focus by representing specific and descriptive categories of content or functionality on each tab.

Platform considerations

Not supported in macOS or watchOS.

iOS, iPadOS

By default, a tab bar is translucent: It uses a background material only when content appears behind it, removing the material when the view scrolls to the bottom. A tab bar hides when a keyboard is onscreen.

Avoid overflow tabs whenever possible. Depending on device size and orientation, the number of visible tabs can be smaller than the total number of tabs. If horizontal space limits the number of visible tabs, the trailing tab becomes a More tab, revealing the remaining items in a list on a separate screen. The More tab makes it harder for people to reach and notice content on tabs that are hidden, so try to limit scenarios in your app where this can happen.

In an iPadOS app, consider using a sidebar instead of a tab bar. Because a sidebar can display a large number of items, it can make navigating an iPad app more efficient. You can also let people customize a sidebar’s items and let them hide it to make more room for content. For guidance, see Sidebars.

(Video) UI Design Livestream - Designing your first iOS app

Ensure that tabs affect the view that’s attached to the tab bar, not views elsewhere onscreen. For example, make sure selecting a tab on the left side of a split view doesn’t cause the right side of the split view to change.

Use a badge to communicate unobtrusively. You can display a badge — a red oval containing white text and either a number or an exclamation point — on a tab to indicate that new information associated with that view or mode is available. For guidance, see Notifications.

Consider using SF Symbols to provide scalable, visually consistent tab bar items. When you use SF Symbols, tab bar items automatically adapt to different contexts. For example, the tab bar can be regular or compact, depending on the current device and orientation. Also, tab bar icons can appear above tab titles in portrait orientation, whereas in landscape, the icons and titles can appear side by side. Prefer filled symbols or icons for consistency with the platform. If your app uses a sidebar instead of a tab bar when it runs on iPad, switch the filled symbols or icons to the outlined variant in the sidebar.

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (3)

If you need to create custom tab bar icons using bitmaps, create each icon in two sizes so that the tab bar looks good in both regular and compact environments. Use the following metrics when creating tab bar icons in different shapes. For guidance, see Icons.

Target width and height (circular icons)

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (4)

(Video) Building a tab bar with components

Regular tab bars Compact tab bars
25x25 pt (75x75 px @3x) 18x18 pt (54x54 px @3x)
25x25 pt (50x50px @2x) 18x18 pt (36x36 px @2x)

Target width and height (square icons)

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (5)

Regular tab bars Compact tab bars
23x23 pt (69x69 px @3x) 17x17 pt (51x51 px @3x)
23x23 pt (46x46 px @2x) 17x17 pt (34x34 px @2x)

Target width (wide icons)

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (6)

Regular tab bars Compact tab bars
31pt (93px @3x) 23pt (69px @3x)
31pt (62px @2x) 23pt (46px @2x)

Target height (tall icons)

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design (7)

Regular tab bars Compact tab bars
28pt (84px @3x) 20pt (60px @3x)
28pt (56px @2x) 20pt (40px @2x)

macOS

Tab bars aren’t available in macOS. Instead, tab views perform a similar function.

(Video) Apple's Human Interface Guidelines iOS 1 - Design Principles

tvOS

A tab bar is highly customizable. For example, you can:

  • Specify a tint, color, or image for the tab bar background
  • Choose a font for tab items, including a different font for the selected item
  • Specify tints for selected and unselected items
  • Add button icons, like settings and search

By default, a tab bar is translucent, and only the selected tab is opaque. When people use the remote to focus on the tab bar, the selected tab includes a drop shadow that emphasizes its selected state. The height of a tab bar is 68 points, and its top edge is 46 points from the top of the screen; you can’t change either of these values.

If there are more items than can fit in the tab bar, the system truncates the rightmost item by applying a fade effect that begins at the right side of the tab bar. If there are enough items to cause scrolling, the system also applies a truncating fade effect that starts from the left side.

If you use an icon for a tab title, make sure it’s familiar. You can use icons as tab titles to help save space, but only for universally recognized symbols like search or settings. Using an unfamiliar symbol without a descriptive title can confuse people. For guidance, see SF Symbols.

Be aware of tab bar scrolling behaviors. By default, people can scroll the tab bar offscreen when the current tab contains a single main view. You can see examples of this behavior in the Watch Now, Movies, TV Show, Sports, and Kids tabs in the TV app. The exception is when a screen contains a split view, such as the TV app's Library tab or an app's Settings screen. In this case, the tab bar remains pinned at the top of the view while people scroll the content within the primary and secondary panes of the split view. Regardless of a tab's contents, focus always returns to the tab bar at the top of the page when people press Menu on the remote.

In a live-viewing app, organize tabs in a consistent way. For the best experience, organize content in live-streaming apps with tabs in the following order:

  • Live content
  • Cloud DVR or other recorded content
  • Other content

For additional guidance, see Live-viewing apps.

(Video) Navigation Bar Component Exploration

Create a branded logo image to display next to the leading or trailing end of the tab bar, if it makes sense in your app. To ensure enough room between the branded logo image and the edge of the tab bar, place the image within the safe margin. Use the following image size values for guidance:

Maximum width Maximum height
200 pt 68 pt

Resources

Related

  • Tab views
  • Toolbars
  • Sidebars
  • Navigation bars

Developer documentation

  • UITabBar — UIKit

Videos

  • Explore navigation design for iOSWWDC22

FAQs

How many tab States should we design for a tab bar? ›

In general, use three to five tabs in iOS; use a few more in iPadOS and tvOS if necessary.

What are the components of iOS? ›

The text and icons can be white or black, but the background can be customized into any color and merge with the Navigation Bar.
  • Navigation Bar. The Navigation Bar is used for quick information about the screen. ...
  • Search Bar. ...
  • Toolbar. ...
  • Tab Bar. ...
  • Sidebar. ...
  • Collection View. ...
  • Activity View. ...
  • Alerts.

What does tab bar mean? ›

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.

What is Apple design called? ›

Aqua is the graphical user interface, design language and visual theme of Apple's macOS operating system. It was originally based on the theme of water, with droplet-like components and a liberal use of reflection effects and translucency.

What are UI elements in iOS? ›

UI elements are the visual elements that we can see in our applications. Some of these elements respond to user interactions such as buttons, text fields and others are informative such as images, labels.

What is iOS interface? ›

Interface. The iOS user interface is based upon direct manipulation, using multi-touch gestures such as swipe, tap, pinch, and reverse pinch. Interface control elements include sliders, switches, and buttons.

How many layers are in iOS? ›

The iOS architecture consists of four layers that, combined, help applications communicate with device hardware. In this lesson, you'll learn more about each of the four layers that lives in the iOS environment.

How do bar tabs work? ›

To open a tab-you order a drink, usually at the bar, and instead of paying for it then, the bar keeps your credit card. The credit card is held and charged until you are done and ready to complete the transaction–this leads us to the next phrase.

Why is it called a tab? ›

The word tab derives from the word tabulate, which means "to arrange data in a tabular, or table, form." When a person wanted to type a table (of numbers or text) on a typewriter, there was a lot of time-consuming and repetitive use of the space bar and backspace key.

How do you make a tab bar in Figma? ›

Make a Tab Bar in Figma (in under 4 minutes) - YouTube

What is human interface design? ›

Human interface design is design that focuses on human-object interactions. There are five principles associated with human interface design; relate to common knowledge, simplify usage, provide feedback, forgive errors, and be appealing.

What is material design UI? ›

Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users' experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.

What framework does iOS use? ›

The UIKit framework provides the required infrastructure for your iOS or tvOS apps.

What are tabs in UX design? ›

Tabs are a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page. They're sort of like tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a page containing related content.

What are tabs used for? ›

Tabs allow you to switch between options in a program, separate documents, or web pages. The currently-selected tab is usually underlined or highlighted in a different color than the other tabs.

How do I add a tab bar to my storyboard? ›

Create Tab Bar App Swift Xcode Tutorial | How to Customise, Show ...

What are the two types of navigation bars? ›

Typically, web sites will have a primary navigation bar and a secondary navigation bar on all pages. These sections of the webpage will include links to the most important sections of the site. The implementation and design of navigation bars is a crucial aspect of web design and web usability.

What are the two main components of user interface? ›

The user interface has two main components: presentation language, which is the computer-to-human part of the transaction, and action language, which characterizes the human-to-computer portion. Together, both concepts cover the form and content of the term user interface.

What is Apple's Human Interface Guidelines? ›

Apple's Human Interface Guidelines (HIG) is a comprehensive resource for designers and developers looking to create great experiences across Apple platforms. Now, it's been fully redesigned and refreshed to meet your needs — from your first sketch to the final pixel.

What's the difference between iOS and Android design? ›

The most basic difference between android and iOS app design for the button styles is that the buttons in iOS apps follow the flat design pattern, so consequently, support the title case. However, the best Android app design follows Material Design so inherently they possess uppercase with buttons styled with shadow.

What is Apple design principles? ›

Apple always designed its products to look clean, simple, and straightforward. Everything from the shape of the phone, to the button design, to the color options to even the fonts used, uses clean and simple lines.

What are the 7 layers in network? ›

7 Layers of OSI Model
  • #1. The Physical Layer.
  • #2. The Data Link Layer.
  • #3. The Network Layer.
  • #4. The Transport Layer.
  • #5. The Session Layer.
  • #6. The Presentation Layer.
  • #7. The Application Layer.

What are design patterns in iOS? ›

Design patterns are reusable solutions to common problems in software design. They're templates designed to help you write code that's easy to understand and reuse. They also help you create loosely coupled code so that you can change or replace components in your code without too much hassle.

What is core services in iOS? ›

Core Services are a set of macOS and iOS application programming interfaces that architecturally are underneath Carbon, Cocoa and Cocoa Touch. In addition to Core Foundation, it also encompasses other APIs including Grand Central Dispatch, Blocks, CFNetwork, CarbonCore, OSServices, and WebServicesCore.

When should you open a tab at a bar? ›

Keep a Tab Open

Unless you're paying with cash, do NOT pay as you go. Even if you only have one drink, open a tab. In fact, it's been estimated that bartenders spend as much as two hours a shift taking and making payments. That's why many bars have $10 or $20 minimums on credit-card transactions.

How long does a bar tab last? ›

Bar tabs run until the kitty is empty. That could be two hours, or it could be four. Drinks packages, however, are price–d per hour. If you're hosting a short event (two hours or less), opt for a package so you can control when drink service ceases.

How do you act at a bar? ›

The 21 Rules of Bar Etiquette
  1. Be a regular at more than one bar. ...
  2. Be patient. ...
  3. Always tip more than you should. ...
  4. Never ask for a 'good pour. ...
  5. Don't ask to transfer a tab to the dinner table. ...
  6. If you're having more than one drink, throw a card behind the bar. ...
  7. Don't get drunk on beer when you're trying to pick up girls.

How many space is a tab? ›

Generally, a tab is the same width as 4 to 5 spaces provided the font being used equally sizes each character. For example, the Courier font's tab equals 5 spaces, whereas the Arial font is 11 spaces to each tab when the font size for both is set to 12.

What does doing a tab mean? ›

slang a portion of a drug, esp LSD or ecstasy.

How do you use components in Figma? ›

Figma Components 101 - YouTube

What are the main sections of figma? ›

There are small Components, such as Buttons and Icons, and there are big components like Cards, Overlays, and Modals. For example, the Card Component can contain Button and Icon Components. This thinking is very much in line with how React works. Let's duplicate a Frame to create one for Cards.

How do you make a clickable prototype in Figma? ›

How to Prototype in Figma - YouTube

Are tabs good UX design? ›

Using tabs can be efficient and lead to strong UX because the navigation scheme aligns with users' expectations.

How do you create tabs in Solidworks? ›

To create a tab and slot:
  1. In a part, click Tab and Slot (Sheet Metal toolbar) or Insert > Sheet Metal > Tab and Slot.
  2. In the PropertyManager, specify options.
  3. In the graphics area, select an edge for the tabs and a corresponding face for the slots. ...
  4. Click .

Is tab bar based on real story? ›

Most of them are also autobiographical. Chandra was based on his cousin's life and fate, while Omkar has many similarities with his father, a retired Armyman, who tried farming and later running a movie theatre in Bathinda, but couldn't due to the militancy problem in Punjab.

Videos

1. Human Interface Guidelines - Fabian Riethmayer
(Linux App Summit)
2. Top navigation bar guidelines and types | UI designing tips part 10
(Graphics Guruji)
3. Make a Tab Bar in Figma (in under 4 minutes)
(Figmin)
4. Navigation in eCommerce - The MobileUX Podcast
(HotWax Developer Network)
5. Interactive PDF Design | Navigation Tabs
(Chris Moreno Design)
6. How to create Navigation bar in Figma using Variants
(Sathish)
Top Articles
Latest Posts
Article information

Author: Gregorio Kreiger

Last Updated: 12/11/2022

Views: 6150

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Gregorio Kreiger

Birthday: 1994-12-18

Address: 89212 Tracey Ramp, Sunside, MT 08453-0951

Phone: +9014805370218

Job: Customer Designer

Hobby: Mountain biking, Orienteering, Hiking, Sewing, Backpacking, Mushroom hunting, Backpacking

Introduction: My name is Gregorio Kreiger, I am a tender, brainy, enthusiastic, combative, agreeable, gentle, gentle person who loves writing and wants to share my knowledge and understanding with you.