Sidebars

ComponentsLayout

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/sidebars. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Sidebars

Best practices

Extend content beneath the sidebar.

When possible, let people customize the contents of a sidebar.

Group hierarchy with disclosure controls if your app has a lot of content.

Consider using familiar symbols to represent items in the sidebar.

Consider letting people hide the sidebar.

In general, show no more than two levels of hierarchy in a sidebar.

If you need to include two levels of hierarchy in a sidebar, use succinct, descriptive labels to title each group.

Platform considerations

iOS

Avoid using a sidebar.

iPadOS

Consider using a tab bar first.

If necessary, apply the correct appearance to a sidebar.

macOS

Avoid stylizing your app by specifying a fixed color for all sidebar icons.

Consider automatically hiding and revealing a sidebar when its container window resizes.

Avoid putting critical information or actions at the bottom of a sidebar.

visionOS

If your app’s hierarchy is deep, consider using a sidebar within a tab in a tab bar.

Resources

Developer documentation

Videos

Change log


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/sidebars

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.