Structure
OUDSTabBar
The Tab bar is a system navigation component with a position which can vary depending to the OS. The tab bar can be found at the bottom of the screen for iOS. It can vary for iPadOS. It allows users to switch between the sections of an app. Each tab can be represented by a label, optionally paired with an icon, and maintains persistent visibility across top-level destinations.
- iOS 15.0+
- macOS 13.0+
- visionOS 1.0+
@MainActor struct OUDSTabBar<Content> where Content : View
Mentioned In
Appearances
iOS 26 brings Liquid Glass, the new Apple look and feel which will prevent developers to define specific styles for some critical components like bars. Because today the OUDS tab bar relies on native component and is not designed from scratch, some elements will look different between iOS 26 and older versions:
background color of tab bar can be changed for iOS lower than 26
background color of tab bar does not change since iOS 26
normal / unselected tab item color can be changed for both image and text only for iOS lower than 26
with iOS 26 no token of color are applied on unselected / normal tab item because only the image will be changed and not the text making theme not readable in dark color scheme
In addition the badges colors will be the same and cannot be changed (except with token definition). These particular badges do not rely on OUDSBadge component, the native API is used instead.
Because Liquid Glass is available since iOS 26, the tab bar will be liquified / glassified since this OS version, not before.
If you use SF Symbols for images, if they exist their fill variant will be automatically used in the tab bar (native behaviour).
Platform considerations
This component is tailored for iOS
On iPadOS the tabs do not apply the fonts since iPadOS 18
Because macOS does not support UIKit and because UIKIt is used to define the style of the tab bar, there is not styling of the tab bar for macOS
visionOS with is specific UI does not apply colors on tab bars and things are glasssified
The component is not available for watchOS
The component is not available for tvOS
Guidelines
OUDS guidelines recommends to:
limit when possible the number of items to 5
use both images and texts in tab bar items
use badges only when needed to avoid to have heavy tab bar
be sure the selected information is not only defined by the color of the tab; you may need to change the shape or the fill of the image
if a badge must be displayed, prefer short texts. If the text is a decimal value greater than 99, prefer display “+99”
if decorative images are used for tab bar item, apply template rendering mode on it to apply color on tabs
Accessibility considerations
If your tabs embedded in the OUDSTabBar do not contain texts but only images, add an accessibility label introducing the journey for this tab
If your tabs embedded in the OUDSTabBar display a badge (empty or with text), vocalize it in your tab to let users know what it is (unread messages, new things, etc) by using accessibiltiy value
OUDSTabBar {
SomeView()
.tabItem {
Label {
Text("Emails") // The text is vocalized first
.accessibilityValue("5 unread emails") // A value vocalized after the text
} icon: {
Image(systemName: "mail").accessibilityHidden(true)
}
}
.badge(5) // The value you give to the badge
}
Selection of tabs
For iOS lower than 26, a selected tab indicator can be displayed in the OUDSTabBar if the count parameter is defined (to the number of tabs in the component) and if the selectedTab binding value is equal to a given tag associated to a tab item. Otherwise the indicator won’t appear; these parameters are mandatory to compute the location of the indicator. This rule is only applied if selected tab indicator must be displayed. When the user taps a tab, the selectedTab binding is updated automatically, keeping the parent view in sync.
Technical considerations
In order to improve the Developer eXperience the current OUDSTabBar implementation lets users define their own tab items. OUDS applies only appearances and styles on elements to prevent users to define raw data to assign to the component before being rendered like a picker. Thus users will need to add their own accessiiblity label if badges are used or also apply template rendering mode on images if needed. Thus it will be also possible to use Liquid Glass new API with animations and items stacking.
You must use in your tab bar items images with a size of 26 x 26, otherwise rendering could be unaligned with Figma specifications
Because the component cannot compute the ideal width of the selected tab indicator (for iOS before 26 and iPadOS before 18), ideal width based on the tab bar item content, this indicator is not displayed for iOS lower than 26 in landscape mode and iPadOS.
If your app uses several universes with nested views, containing their own navigation and tab bars, prefer hideTabBar() from View to hide the tab bar (TabView and overlay items) with Liquid Glass is disabled or not available, or also tabBar(isHidden:).
Code samples
// Use the OUDS tab bar to wrap tab bar items and associated views
// Item tagged 0 will be selected first, 3 tabs are embedded.
// Image with size of 26 x 26
@State private var selectedTab = 0
OUDSTabBar(selectedTab: $selectedTab, count: 3) {
// Add the views with the SwiftUI tab item and labels
// No need to define colors, everything is done inside OUDSTabBar
SomeView()
.tabItem {
Label("Label 1", image: "image_1")
}
.tag(0) // Must match the selectedTab binding value
OtherView()
.tabItem {
Label {
Text("Label 2")
} icon: {
Image(decorative: "image_2")
.renderingMode(.template) // Mandatory to apply color on selected item
}
}
.tag(1) // Must be used for the selectedTab binding
LastView()
.tabItem {
Label("Label 3", image: "image_3")
}
.tag(2) // Must be used for the selectedTab binding
}
Design documentation
unified-design-system.orange.com
Themes rendering
Liquid Glass
Orange
Orange Compact
Sosh
Wireframe
Without Liquid Glass
Orange
Orange Compact
Sosh
Wireframe
Version
1.0.0 (Figma component design version)
Since
1.0.0
Topics
Initializers
Instance Properties