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.

HTML
<nav class="c-vertical-menu" aria-label="sidmeny" rel="c-menu-js">
	<ul class="c-vertical-menu__list">
		<li class="c-vertical-menu__list-item">
			<a tabindex="0"> Val 1 </a>
      </li>
      <li class="c-vertical-menu__list-item">
         <a tabindex="0" class="menuitem--active"> Val 2 </a>
      </li>
      <li class="c-vertical-menu__list-item">
         <a tabindex="0"> Val 3 </a>
      </li>
      <li class="c-vertical-menu__list-item">
          <a tabindex="0"> Val 4 </a>
      </li>
   </ul>
</nav>

Senast publicerad

Sidansvarig för sidan är Styleguide