Structure

OUDSToolBarTop

The top toolbar (aka navigation bar on iOS and iPadOS 18 and lower) sits at the top of the screen and provides contextual information and controls related to the current view. It typically displays the page title, and may include navigation actions such as “Back” or “Close” as well as supplementary actions. It can contains leading and trailing actions.

iOS 15.0+
visionOS 1.0+

@MainActor struct OUDSToolBarTop

Overview

toolBarTop(_:hasLargeTitle:subtitle:leadingItems:trailingItems:) View helper applies a SwiftUI toolbar configuration.

Appearances

With Liquid Glass / iOS 26+ the OS will change the rendering of the toolbar items depending to the context:

The OS can group the items of same types in one group with kind of rectangle (e.g. views with menus)
But for buttons items they will remain isolated
The placement of the title can be leading or centered depending to the length of the text
The text can be truncated if there is not enough remaining space
The OS can apply another style for the back button

Without Liquid Glass / iOS 18 and lower, the OS won’t change that much the style of the toolbar items, Items won’t be visually grouped.

Globaly the appearence of the * navigation bar* elements is changed by the oudsNavigationBarAppearance helper of View that must be applyed on the root view of the NavigationStack for example.

Technical constraints

To be sure for iOS 18 and lower the back buttton and text have the good color, in your main view apply the following accent color:

    struct AppMainView: View {
        var body: some View {
            ContentView()
                .accentColor(theme.colors.contentDefault)
        }
    }

Platform considerations

The component is available on iOS, iPadOS, and visionOS
The component is not available for watchOS, tvOS and macOS

Badges uses

For iOS 26 with Liquid Glass, the system badge is used because the OUDSBadge does not provide a suitable rendering with the glassified effect applied on the top toolbar. For iOS until 18 and without Liquid Glass OUDSBadge is always used.

Code sample

    ContentView()
        .toolBarTop("Title",
            leadingItems: {
                OUDSToolBarItem(navigation: .back())
            },
            trailingItems: {
                OUDSToolBarItem(label: "Label") { /* Action to process */ }
                OUDSToolBarItem(icon: Image(decorative: "some_image"), accessibilityLabel: "Label") { /* Action to process */ }
            }
        )

Design documentation

unified-design-system.orange.com

Themes rendering

Liquid Glass

Orange

A top toolbar component in light mode with Liquid Glass effect and Orange theme A top toolbar component in dark mode with Liquid Glass effect and Orange theme

Orange Compact

A top toolbar component in light mode with Liquid Glass effect and Orange Compact theme A top toolbar component in dark mode with Liquid Glass effect and Orange Compact theme

Sosh

A top toolbar component in light mode with Liquid Glass effect and Sosh theme A top toolbar component in dark mode with Liquid Glass effect and Sosh theme

Wireframe

A top toolBar component in light mode with Liquid Glass effect and Wireframe theme A top toolbar component in dark mode with Liquid Glass effect and Wireframe theme

Without Liquid Glass

Orange

A top toolbar component in light mode without Liquid Glass effect and Orange theme A top toolbar component in dark mode without Liquid Glass effect and Orange theme

Orange Compact

A top toolbar component in light mode without Liquid Glass effect and Orange Compact theme A top toolbar component in dark mode without Liquid Glass effect and Orange Compact theme

Sosh

A top toolbar component in light mode without Liquid Glass effect and Sosh theme A top toolbar component in dark mode without Liquid Glass effect and Sosh theme

Wireframe

A top toolbar component in light mode without Liquid Glass effect and Wireframe theme A top toolbar component in dark mode without Liquid Glass effect and Wireframe theme

Version
1.0.0 (Figma component design version)

Since
1.4.0

Topics

Initializers

init(title: String, hasLargeTitle: Bool, subtitle: String?, leadingItems: () -> [OUDSToolBarItem], trailingItems: () -> [OUDSToolBarItem])
ViewModifier to define an OUDS top toolbar.

Instance Methods

func body(content: OUDSToolBarTop.Content) -> some View