Horisontell meny

Den horisontella menyn kan du till exempel använda när du har få menyval.

Design och språk

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.

Meny utan sidhuvud

 

HTML
<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>

Meny med sidhuvud för interna tjänster

 

HTML
<header class="c-header">
  <div class="l-container">
    <div class="l-container__inner">
      <div class="c-header__content">
        <div class="c-header__content--title">
          <a class="c-header__content--title__link" href="https://www.jordbruksverket.se">
            <img alt="Jordbruksverkets logo" role="presentation" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/release/assets/img/jordbruksverket-logotype.svg">
          </a>
          <span class="c-header__content--title__divider"></span>
          <a class="c-header__content--title__text"> Tjänstens namn </a>
        </div>
        <div class="c-header__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>
</header>
<div class="container" role="main">
  <div class="row">
    <div class="col">Innehållsyta</div>
  </div>
</div>

Meny med sidhuvud för e-tjänster

 

HTML
<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/18.0.31/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>

Senast publicerad

Sidansvarig för sidan är Styleguide