Navigation menu

The navigation menu offer quick access to the main pages in the application including and optional search box. The list can include nested entries that can be expanded in the menu. In the lover corner of the navigation menu is access to application settings and a vendor menu.

Variations

The navigation menu are present on all applications and offer a consistent way for navigating within an application.

Navigation menu

The navigation menu are present on all applications and offer a consistent way for navigating within an application.

Navigation menu

The navigation menu are present on all applications and offer a consistent way for navigating within an application.

Component building blocks

How to construct the navigation menu.

Anatomy

The navigation menu is built up of multiple components.

Colors and styles

The navigation menu uses the global container color. The dark area to the right overlays the other content on the screen when the navigation menu is open.

Bright

Day

Dusk

Night

Element

Color / Style name

1

Border

This is some text inside of a div block.

2

Container

This is some text inside of a div block.

3

Divider

This is some text inside of a div block.

4

Border

This is some text inside of a div block.

5

Container

This is some text inside of a div block.

6

Container

This is some text inside of a div block.

Element

Color / Style name

1

Border

This is some text inside of a div block.

This is some text inside of a div block.

2

Container

This is some text inside of a div block.

This is some text inside of a div block.

3

Divider

This is some text inside of a div block.

This is some text inside of a div block.

4

Border

This is some text inside of a div block.

This is some text inside of a div block.

5

Container

This is some text inside of a div block.

This is some text inside of a div block.

6

Container

This is some text inside of a div block.

This is some text inside of a div block.

Element

Color / Style name

1

Border

This is some text inside of a div block.

This is some text inside of a div block.

2

Container

This is some text inside of a div block.

This is some text inside of a div block.

3

Divider

This is some text inside of a div block.

This is some text inside of a div block.

4

Border

This is some text inside of a div block.

This is some text inside of a div block.

5

Container

This is some text inside of a div block.

This is some text inside of a div block.

6

Container

This is some text inside of a div block.

This is some text inside of a div block.

Element

Color / Style name

1

Border

This is some text inside of a div block.

This is some text inside of a div block.

2

Container

This is some text inside of a div block.

This is some text inside of a div block.

3

Divider

This is some text inside of a div block.

This is some text inside of a div block.

4

Border

This is some text inside of a div block.

This is some text inside of a div block.

5

Container

This is some text inside of a div block.

This is some text inside of a div block.

6

Container

This is some text inside of a div block.

This is some text inside of a div block.

Specs

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