Skip Navigation

Sidebars

A sidebar appears on the leading side of a view and lets people navigate between sections in your app or game.

A stylized representation of the top portion of a window's sidebar displaying a title, a section, and some folders. The image is tinted red to subtly reflect the red in the original six-color Apple logo.

Sidebars require a large amount of vertical and horizontal space. When space is limited or people want to devote more of their screen to content and other functionality, a more compact control may provide a better navigation experience. With this in mind, starting in iOS 18, iPadOS 18, macOS 15, tvOS 14, and visionOS 2, the sidebarAdaptable style of tab view provides navigation with the following behaviors depending on the platform:

  • iOS 18: A tab bar at the bottom of the screen

  • iPadOS 18: A tab bar that people can convert to a sidebar

  • macOS 15 and tvOS 14: A sidebar

  • visionOS 2: An ornament, in addition to a sidebar for secondary tabs within a tab section

To present a sidebar only, display a list in the primary pane of a split view with NavigationSplitView, UISplitViewController, or NSSplitViewController.

Best practices

Use a sidebar to help people quickly navigate to key areas of your app or top-level collections of content, like folders and playlists. A sidebar can help you flatten your information hierarchy, giving people access to several peer information categories or modes at the same time.

When possible, let people customize the contents of a sidebar. A sidebar lets people navigate to important areas in your app, so it works well when people can decide which areas are most important and in what order they appear.

Consider letting people hide the sidebar. People sometimes want to hide the sidebar to create more room for content details or to reduce distraction. When possible, let people hide and show the sidebar using the platform-specific interactions they already know. For example, in iPadOS, people expect to use the built-in edge swipe gesture; in macOS, you can include a show/hide button or add Show Sidebar and Hide Sidebar commands to your app’s View menu. In visionOS, a window typically expands to accommodate a sidebar, so people rarely need to hide it. Avoid hiding the sidebar by default to ensure that it remains discoverable.

In general, show no more than two levels of hierarchy in a sidebar. When a data hierarchy is deeper than two levels, consider using a split view interface that includes a content list between the sidebar items and detail view.

If you need to include two levels of hierarchy in a sidebar, use succinct, descriptive labels to title each group. To help keep labels short, omit unnecessary words.

Platform considerations

No additional considerations for tvOS. Not supported in watchOS.

iOS

Avoid using a sidebar. A sidebar takes up a lot of space in landscape orientation and isn’t available in portrait orientation. Instead, consider using a tab bar, which takes less space and remains visible in both orientations.

iPadOS

In iPadOS 18 and later, when you use the sidebarAdaptable style of tab view to present a sidebar, you choose whether to display a sidebar or a tab bar when your app opens. Both variations include a button that people can use to switch between them.

Consider using a tab bar first. A tab bar provides a full-screen browsing experience, and offers enough flexibility to navigate through many apps’ most important content. If you need to expose more areas than fit in a tab bar, the tab bar’s convertible sidebar-style appearance can provide access to content that people use less frequently. For guidance, see Tab bars.

If necessary, apply the correct appearance to a sidebar. If you’re not using SwiftUI to create a sidebar, you can use the UICollectionLayoutListConfiguration.Appearance.sidebar appearance of a collection view list layout. For developer guidance, see UICollectionLayoutListConfiguration.Appearance.

macOS

In macOS, a sidebar — also known as a source list — extends to the full height of the window, and uses a rounded-corner appearance for the selected-item highlight.

A sidebar’s row height, text, and glyph size depend on its overall size, which can be small, medium, or large. You can set the size programmatically, but people can also change it by selecting a different sidebar icon size in General settings. The table below shows the default metrics for a sidebar in macOS.

Sidebar size

Sidebar component

Default metrics

Small

Row height

24 pt

SF Symbol scale

Medium *

Icon size

16x16 px @1x

Text size (style)

11 pt (Subhead)

Medium

Row height

28 pt

SF symbol scale

Medium

Icon size

20x20 px @1x

Text size (style)

13 pt (Body)

Large

Row height

32 pt

SF Symbol scale

Medium

Icon size

24x24 px @1x

Text size (style)

15 pt (Title 3)

All

Horizontal spacing between cells

17 pt

Vertical spacing between cells

0 pt

*In some cases, a small sidebar uses small-scale SF Symbols by default.

Consider using familiar symbols to represent items in the sidebar. SF Symbols provides a wide range of customizable symbols you can use to represent items in your app. If you need to use a bitmap image to create a custom interface icon for the sidebar, create the image in both @1x and @2x resolutions and in the small, medium, and large sizes shown in the table above.

Avoid stylizing your app by specifying a fixed color for all sidebar icons. By default, sidebar icons use the current accent color and people expect to see their chosen accent color throughout all the apps they use. Although a fixed color can help clarify the meaning of an icon, you want to make sure that most sidebar icons display the color people choose.

If necessary, apply the correct background appearance to a sidebar. If you’re not using SwiftUI to create a sidebar in your macOS app, you may need to specify an opaque background for when the window contains more than one sidebar, or when using a sidebar in a panel or settings window. In all other use cases, use a translucent background for the sidebar.

Consider automatically hiding and revealing a sidebar when its container window resizes. For example, reducing the size of a Mail viewer window can automatically collapse its sidebar, making more room for message content.

In an editable sidebar, avoid placing edit buttons at the bottom edge of the view. Consider providing buttons that add, remove, manipulate, or get information about items. Buttons at the bottom of the sidebar can hide when the bottom edge of the window is offscreen. To let people add a new sidebar group, include an Add (+) button on the trailing side of the group’s label, next to the disclosure triangle. Provide other actions, like remove, in a context menu or in a menu bar menu. For example, in addition to providing the New Mailbox command in a context menu, Mail also lists it in the Mailbox menu.

visionOS

If your app’s hierarchy is deep, consider using a sidebar within a tab in a tab bar. In this situation, a sidebar can support secondary navigation within the tab. If you do this, be sure to prevent selections in the sidebar from changing which tab is currently open.

A partial screenshot of the Music app in visionOS. The app's window includes a sidebar for navigating the music library, and the secondary pane includes a grid of playlists.

Resources

Split views

Tab bars

Navigation bars

Layout

Developer documentation

sidebarAdaptable — SwiftUI

NavigationSplitView — SwiftUI

sidebar — SwiftUI

UICollectionLayoutListConfiguration — UIKit

NSSplitViewController — AppKit

Videos

Change log

Date

Changes

August 6, 2024

Updated guidance to include the SwiftUI adaptable sidebar style.

December 5, 2023

Added artwork for iPadOS.

June 21, 2023

Updated to include guidance for visionOS.

Current page is Sidebars