App bar

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

To see a detailed explanation of all existing helper classes for the advanced app bar, please refer to the usage table below.

Advanced version of app bar

There is an advanced version of the app bar as well as a simple version. Please consider using the advanced version as it gives you much more possibilities of structuring your application and navigation.

All functionality for expanding/collapsing, selecting and interacting is implemented (and documented) with plain JavaScript at the end of the examples.

Advanced app bar

Advanced app bar, with OS Bar

Usage

ElementClassDescription
.appWrapper .has-appBarAdvanced This class is necessary for the general / overall layout to calculate (left side) whitespace for the advanced app bar.
.appWrapper .has-appBarAdvanced .has-appBarAdvanced-collapsed This class has to be toggled from clicking the "collapse" link in the footer section of the advanced app bar and extends the app layout for a smaller, condensed version of the advanced app bar.
.level1 .is-shown This class shows the title as well as the subitems ("level2") of an app bar item. This class should be removed on mouseout of such an item again.
There should never be more then one single app bar item with this class.
.level1 .is-active This class expands and visually highlights the currently selected ("active") app bar item. This should be triggered on click of the App bar item.
There should never be more then one single app bar item with this class.
.level1 .is-home This class can be used for the first item, it adds a thin visual separator after this item as well as hides the item label on hover in collapsed state. This class shall only be used on the first item (= the "home" item).
.level1 .has-separator This class adds a thin visual separator between this and the preceeding item.
.item__icon .has-notification This class shows an indicator next to an item's icon. This can be used to indicate that something within this app's module needs an user's attention.
The color of the indicator is set to the global state color used for errors (default: red).


To see a detailed explanation of all existing helper classes for the app bar, please refer to the usage table below.

App bar

App bar (alternative markup)

Usage

ElementClassDescription
.appBar__item .is-activated Highlights the current app bar item
.appBar__item .is-focused, :focus Visually highlights a (focused via keyboard navigation) element.
.appBar__item .is-disabled Disables an app bar item (visually and on hover)
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top