Horisontell meny
Den horisontella menyn kan du till exempel använda när du har få menyval.
Design och språk
När du ska använda den horisontella menyn
Den horisontella menyn fungerar bra för en huvudnavigering. Den är också bra när du har få menyval och du vet att du inte kommer behöva lägga till fler menyval senare.
Menyn är inte anpassad för mindre skärmar som till exempel en mobil. Den fungera på en liten skärm men kanske inte på det sätt som du tänkt dig. Tänk igenom designen i din tjänst och se vad som fungerar bäst.
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 avsluta med punkt.
Komponent och kod
Komponenten driftsattes första gången i version 5.2.0.
Denna komponent kräver Javascript för att fungera.
<nav class="c-menu c-menu--horizontal" 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="horizontal">
<nav aria-label="sidmeny">
<ul>
<li>
<a tabindex="0"> Design </a>
</li>
<li class="c-menu__list-item--active">
<a aria-current="page" tabindex="0"> Components </a>
</li>
<li>
<a tabindex="0"> Content </a>
</li>
<li>
<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options="{
"size": "medium"}">
<button type="button" aria-haspopup="menu" class="c-menu__list-item" slot="triggerBtn_large">
<span>Dropdown</span>
<span class="sjv-i-caret-ner button-icon--right"></span>
</button>
<jv-link-list slot="content">
<ul>
<li>
<a href="#" class="c-link">
<span>Inställningar</span>
</a>
</li>
<li>
<a href="#" class="c-link">
<span>Säkerhet</span>
</a>
</li>
</ul>
</jv-link-list>
</jv-dropdown>
</li>
</ul>
</nav>
</jv-menu>Senast publicerad
Sidansvarig för sidan är Styleguide