Topbar

Updated:

February 1, 2020

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left. Alarm icon,dimming and palette icon, optional fields and an application launcher are aligned to the right. The optional field include application icons with direct link to programs and a time component.

Variations

The topbar may be displayed in different variations, depending on the type of application and needs for different functions.

Standard topbar

The standard Topbar is the most used version for all full applications.

Standard topbar

The standard Topbar is the most used version for all full applications.

Topbar with app shortcuts

The topbar can contain app shortcuts to related and frequently used applications.

Topbar with app shortcuts

The topbar can contain app shortcuts to related and frequently used applications.

Topbar with clock

A standardised clock may be displayed in the topbar if needed.

Topbar with clock

A standardised clock may be displayed in the topbar if needed.

Topbar with alert

Alerts pops up in the topbar.

Topbar with alert

Alerts pops up in the topbar.

Topbar for app settings

The topbar for app settings has a back button, a close button and supports a breadcrumb.

Topbar for app settings

The topbar for app settings has a back button, a close button and supports a breadcrumb.

Component building blocks

How to build the topbar.

Anatomy

The topbar is a nested component, and contains multiple components.

Component elements
1
Container
2
Flat button
3
Title
4
Subtitle
5
Border

Colors and styles

Element
Color / Style name
1
Container
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
4
Title
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Title
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Title
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Title
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
1
Title
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Title
2
Subtitle
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Subtitle
Element
Text style
1
Title
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Title
2
Subtitle
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Subtitle

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

No items found.
Submit feedback