You are viewing an archived version of the MindSphere Design System website, version 1.9.0

App bar

The app bar is used to switch between the different top-level views of an app.

Usage

When to use

Use the app bar in the following cases:

  • When there are two to seven top-level destinations. The recommended number of items is three to five.
  • When a quick navigation between unrelated parts of an application is necessary.

The app bar allows you to structure your app further within optional sub-sections.

General construction

An app bar consists of the following elements:

app bar collapsed
App bar collapsed: 1. App bar item, 2. Current page item, 3. Icon, 4. Label, 5. Item Badge (optional), 6. Item background, 7. App bar background, 8. App bar item sub-section (optional)

app bar expanded
App bar expanded: 1. App bar item, 2. Current page item, 3. Icon, 4. Label, 5. Item Badge (optional), 6. Item background, 7. App bar background, 8. App bar item sub-section (optional)

1. App bar item

  • There must be a minimum of two and a maximum of seven app bar items.

2. Current page item

  • There is always one current page item in the app bar.
  • It visually stands out from the default items.

3. Icon

  • The icon should be recognizable and represent the functionality of the according top-level destination.

4. Label

  • The label should be short and descriptive.

5. Item badge (optional)

  • The optional badge for an app bar item can visualize important events or notifications for a top-level destination.

6. Item background

  • The item background changes visually according to the different item states.

7. App bar background

8. App bar item sub-section (optional)

Every app bar item can have an optional sub-section of items. These items have to fit in context of their parent item.

Behavior

General behavior

  • An app can only have one app bar.
  • The app bar must be available to the user whenever navigation is possible.
  • The app bar can be hidden in fullscreen forms, for example on edit pages.
  • The app bar can be scrolled vertically if there are more items in the viewport than visible.
  • While the app bar top-level items should be limited to a maximum of 7 items, sub-sections may contain as many items as needed.

Label behavior

  • Use short and precise labels.
  • On mouseover, the sub-items of a app bar item are shown (if there are any).
  • Depending on app bar state (expanded vs. collapsed) the currently active app bar item’s sub-section is visible / expanded.

Placement

The app bar is placed in the local region.

App bar states

The app bar can be toggled between 2 states: collapsed and expanded. These states can be toggled by clicking a toggle button positioned at the bottom of the app bar. When collapsed the first level of the app bar only shows icons and reveals labels and subitems on mouseover. When expanded the labels are shown permanently.

Do’s & Don’ts

app-bar-usage-do

app-bar-usage-dont

  • Use an app bar to provide quick access to top-level destinations in the app.
  • Do not use an app bar for sub-level navigation in the main region.

Style

This chapter shows several app bar item styles in the design system.

Overview

The current item state is emphasized by a solid icon style. It also has a vertical indicator line on the left side.

App bar interaction and states
Interacting with expanded and collapsed app bar

Expanded app bar
In-app example, collapsed app bar

collapsed app bar
In-app example, expanded app bar

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing and spacing for app bar expanded
Sizing and spacing for app bar (expanded)

Sizing and spacing for app bar collapsed
Sizing and spacing for app bar (collapsed)

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top