Updated: January 28, 2022

Sidebar

Intro

A sidebar provides app-level navigation and quick access to users’ favorite or pinned contents. The sidebar is useful if you expect a user to switch between app-level destinations frequently.

Example of a sidebar on iPad
Example of a sidebar on iPad

Anatomy

The primary column contains the sidebar. The sidebar contains a header, a list, a footer, and a vertical divider.

A: Header

B: Destination list

C: Footer

D: Default cell

E: Active cell

F: Outlined group

G: Vertical divider

Primary Column

The width of the primary column is flexible. The default width is set to 320px.

Destination List

  • Icon: Icons are optional. Icons supplement labels as indicators of a destination.
  • Label: Keep text labels concise. When a text label extends beyond the primary column width, instead of shrinking or wrapping it, truncate it.
  • Right accessories: Right accessories are optional; numbers or any icon button can be added here. Within an outlined group, don’t mix number and icon button or different icon buttons.

Outlined Group

Related destinations can be grouped together. Grouped items have a heading as a group name.

Sidebar anatomy
Sidebar anatomy

Behavior and Interaction

Selection

The current screen is selected and represented with an active state. When the app is first opened, the landing screen, Overview in this example, is an active state by default. Only one cell in the sidebar can be activated at a time.

Active Work Orders cell (left) and active Assets cell (right)
Active Work Orders cell (left) and active Assets cell (right)

Grouping

Destinations in a same category can be grouped together as an outlined group. An outlined group has a header and the list of destinations. The header contains the group name and the chevron. Tapping on a header opens or collapses the destination list below the header.

Collapsed group (left) and expanded group (right)
Collapsed group (left) and expanded group (right)

Collapsing and Opening

In landscape mode, the sidebar is visible by default. To create more room for their content, the sidebar can be collapsed by the toggle icon on the top left corner. The user can open the sidebar again by using the built-in edge swipe gesture.

In portrait mode, the sidebar is open by default as an overlay. The sidebar can be collapsed by tapping outside of view. The user can open the sidebar again by the built-in edge swipe gesture.

Collapsing and opening the sidebar
Collapsing and opening the sidebar

Customization

The content of a sidebar is customizable (edit mode). Users can click on the Edit button and rearrange destinations or delete pinned items from the sidebar.

Information
In Fiori for iOS SDK 6.1 customization (edit mode) is not yet supported.
Rearranging cells in edit mode via drag and drop
Rearranging cells in edit mode via drag and drop

Scrolling

The sidebar is vertically scrollable, if the list of navigation destinations is longer than the height of the area between the header and the footer. When the user scrolls down, the sidebar title switches to collapsed mode and stays fixed.

Vertical scrolling within sidebar
Vertical scrolling within sidebar

Adaptive Design

In compact mode the sidebar is replaced with a tab bar or a preview table view.

Tab bar in compact width (left) and sidebar in regular width (right)
Tab bar in compact width (left) and sidebar in regular width (right)

Tab Bar

A tab bar can contain up to 5 destination items. If there are more than 5 destinations in the sidebar, the last tab can be used to access the other destinations.

Back Button

For apps that don’t have deep navigation, the back button in the navigation bar can be used to access the full destination list.

Specifications

Sidebar specification
Sidebar specification

Resources

Related Foundations: Adaptive Design, Navigation

Human Interface Guidelines: Sidebars