Användningsområde

Menyn används för navigering till olika interna sidor och är placerad till vänster. Färgen längs den vänstra sidan följer tema.

Menyn består av:

Ett menyhuvud för plats för rubrik
Ett eller flera menyval
En eller flera undermenyer
En eller flera menyavdelare

En välstrukturerad meny ska vara uppdelad efter användarnas förståelse av innehåll/funktionalitet som systemet är avsedd för. Med fördel kan menyval som används oftast vara placerad överst i hierarkin, men ha fasta platser när de har bestämts.

Artboard

Acceptanskriterier

Meny -
Menyn har en fast bred på 225px (198px för skärmar under 1459px)

Meny header

<div class=”menu__header”>

Meny headern har en fast höjd på 72px (63px för skärmar under 1459px)

Menyval

<vgr-menu-item>

Menyval har en fast höjd på 39px (36 för skärmar under 1459px)
Hela ytan är klickbar
Menyval kan innehålla en notis (class=”Menu__item--notification”
Menyval har fyra olika states -- active, disabled, hover eller vald (Se bilden med exempel menyn)

Submeny

<vgr-submenu>

En submeny används i fall där fler underliggande sidor har ett logiskt samband med varandra.
Submenyn har en fast höjd på 39px (36 för skärmar under 1459px).
Hela ytan är klickbar.
Submenyn, till skillnad från ett menyval, har en chevron till höger som indikerar att flera menyval finns underordnad.
Submenyn är per default uppfäld, men fälls ut vid klick för att visa alla underliggande menyval.
Titlar på dessa underliggande menyval är indenterad med 10 px.