Vertikal meny

Den vertikala menyn kan du till exempel använda när du har många menyval.

Design och språk

Den vertikala menyn kan utökas med fler menyval allt eftersom behoven ändras. Den är därför bra när du har många menyval och när du inte vet hur många fler menyval du kommer behöva placera i menyn.

Den här menyn fungerar bra i en sidpanel. Den vertikala menyn fungerar också 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