Innehållsyta
Den horisontella menyn kan du till exempel använda när du har få menyval.
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 ska
Komponenten driftsattes första gången i version 5.2.0.
Denna komponent kräver Javascript för att fungera.
<nav class="c-menu" aria-label="Huvudmeny">
<ul class="c-menu__list">
<li>
<!-- Om du har href, tabort alla tabindex -->
<a class="c-menu__list-item" tabindex="0"> Design </a>
</li>
<li>
<a class="c-menu__list-item c-menu__list-item--selected" tabindex="0"> Components </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Content </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Patterns </a>
</li>
</ul>
</nav>
<header class="c-header c-header--black">
<div class="l-container">
<div class="l-container__inner">
<div class="c-header__content">
<div class="c-header__content--title">
<div class="c-header__content--title__link">
<img alt="Jordbruksverkets logo" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/20.1.10/package/dist/release/assets/img/jordbruksverket-logotype--white.svg">
</div>
<span class="c-header__content__title__divider"></span>
<span class="c-header__content--title__text"> Tjänstens namn </span>
</div>
<div class="c-header__content--placeholder">
<div class="l-col l-align-center">
<a> Behållare </a>
</div>
</div>
</div>
</div>
</div>
<div class="l-container">
<div class="l-container__inner">
<nav class="c-menu" aria-label="Huvudmeny">
<ul class="c-menu__list">
<li>
<!-- Om du har href, tabort alla tabindex -->
<a class="c-menu__list-item" tabindex="0"> Design </a>
</li>
<li>
<a class="c-menu__list-item c-menu__list-item--selected" tabindex="0"> Components </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Content </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Patterns </a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main class="l-container">
<div class="l-container__inner">
<div class="content-margin">Innehållsyta</div>
</div>
</main>
<header>
<div class="c-header--black">
<div class="l-container">
<div class="l-container__inner">
<div class="c-header--black__content">
<div class="c-header--black__content--title">
<a class="c-header--black__content--title__link" href="https://www.jordbruksverket.se">
<img alt="Jordbruksverkets logo" role="presentation" class="c-header--black__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/20.1.10/package/dist/release/assets/img/jordbruksverket-logotype--white.svg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-header--large">
<div class="l-container">
<div class="l-container__inner">
<div class="c-header--large__content">
<div class="c-header--large__content--title">
<a class="c-header--large__content--title__text" tabindex="0"> Tjänstens namn </a>
</div>
<div class="c-header--large__content--placeholder">
<div class="l-col l-align-center">
<a> Behållare </a>
</div>
</div>
</div>
<nav class="c-menu" aria-label="Huvudmeny">
<ul class="c-menu__list">
<li>
<!-- Om du har href, tabort alla tabindex -->
<a class="c-menu__list-item" tabindex="0"> Design </a>
</li>
<li>
<a class="c-menu__list-item c-menu__list-item--selected" tabindex="0"> Components </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Content </a>
</li>
<li>
<a class="c-menu__list-item" tabindex="0"> Patterns </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container" role="main">
<div class="row">
<div class="col">Innehållsyta</div>
</div>
</div>