Vertikal meny
Den vertikala menyn kan du till exempel använda när du har många menyval.
Design och språk
När du ska använda den vertikala menyn
Den vertikala menyn kan du till exempel använda när du har många menyval. Den är också ett bra val när du inte vet hur många val du kommer behöva placera i menyn,eftersom du lätt kan öka på valen allteftersom behoven ändras. Den fungerar också bra i en sidpanel.
Den vertikala menyn fungerar bättre på en liten skärm än vad den horisontella menyn gör.
Texten på menyvalen
Texten på menyvalen ska
- vara korta men tydliga så att man förstår vart menyvalen leder
- behöver inte vara exakt samma som rubriken på den sida där man hamnar, men man ska förstå att man har hamnat rätt.
- inte innehålla förkortningar
- börja med stor bokstav och inte avslutas med punkt.
Komponent och kod
Komponenten driftsattes första gången i version 13.0.0.
<nav class="c-menu c-menu--verticle" aria-label="sidmeny">
<ul class="c-menu__list">
<li class="c-menu__list-item">
<a tabindex="0"> Val 1 </a>
</li>
<li class="c-menu__list-item c-menu__list-item--active">
<a aria-current="page" tabindex="0"> Val 2 </a>
</li>
<li class="c-menu__list-item">
<a tabindex="0"> Val 3 </a>
</li>
<li class="c-menu__list-item">
<button tabindex="0"> Val 4 </button>
</li>
</ul>
</nav><jv-menu extra-class="" align="verticle">
<nav aria-label="sidmeny">
<ul>
<li>
<a tabindex="0"> Val 1 </a>
</li>
<li class="c-menu__list-item--active">
<a aria-current="page" tabindex="0"> Val 2 </a>
</li>
<li>
<a tabindex="0"> Val 3 </a>
</li>
<li>
<a tabindex="0"> Val 4 </a>
</li>
</ul>
</nav>
</jv-menu>Senast publicerad
Sidansvarig för sidan är Styleguide