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

Denna komponent kräver Javascript för att fungera.

Meny utan sidhuvud

 

<nav class="c-menu c-menu--white c-menu--fullwidth" aria-label="Main menu" rel="c-menu-js">
    <div class="container">
        <ul class="horizontalmenu" role="menubar" aria-label="Main menu">
            <li role="menuitem">
                <a href="#" tabindex="0">
                    Val 1
                </a>
            </li>
            <li role="menuitem">
                <a href="#" tabindex="0" class="active">
                    Val 2
                </a>
            </li>
            <li role="menuitem">
                <a href="#" tabindex="0">
                    Val 3
                </a>
            </li>
        </ul>
    </div>
</nav>

Meny med sidhuvud för interna tjänster

 

<header class="c-header c-header--white" role="heading" aria-level="1">
    <div class="container">
        <div class="c-header__content">
            <img class="c-header__content_logo" src="https://cdn.jordbruksverket.se/designsystem/6.0.0/package/dist/release/assets/img/logo2.png" alt="Jordbruksverket logo">
            <span class="divider"></span>
            <a class="c-header__content_title"> Tjänstens namn </a>
        </div>
        <div class="c-header__content_placeholder">
            <a> Behållare </a>
        </div>
    </div>
</header>
<nav class="c-menu c-menu--white c-menu--fullwidth" aria-label="Main menu" rel="c-menu-js">
    <div class="container">
        <ul class="horizontalmenu" role="menubar" aria-label="Main menu">
            <li role="menuitem">
                <a href="#" tabindex="0">
                    Val 1
                </a>
            </li>
            <li role="menuitem">
                <a href="#" tabindex="0" class="active">
                    Val 2
                </a>
            </li>
            <li role="menuitem">
                <a href="#" tabindex="0">
                    Val 3
                </a>
            </li>
        </ul>
    </div>
</nav>
<div role="main" class="container">
    <div class="row">
        <div class="col">
            Innehållsyta
        </div>
    </div>
</div>

Meny med sidhuvud för e-tjänster

 

<header class="c-header c-header--white">
    <div class="c-header--medium">
        <div class="container">
            <div class="c-header__content--medium">
                <img class="c-header__content_logo" src="https://cdn.jordbruksverket.se/designsystem/6.0.0/package/dist/release/assets/img/logo2.png" alt="Jordbruksverket logo">
            </div>
            <div class="c-header__content_placeholder">
                <a>Behållare</a>

            </div>
        </div>
    </div>

    <div class="c-header--large">
        <div class="container">
            <div class="c-header__content">
                <a class="c-header__content_title--large"> Tjänstens namn </a>
            </div>
            <div class="c-header__content_placeholder">
                <nav class="c-menu c-menu--white c-menu--placeholder" aria-label="Main menu" rel="c-menu-js">
                    <div class="container">
                        <ul class="horizontalmenu" role="menubar" aria-label="Main menu">
                            <li role="menuitem">
                                <a href="#" tabindex="0">
                                    Val 1
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" tabindex="0" class="active">
                                    Val 2
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" tabindex="0">
                                    Val 3
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<div role="main" class="container">
    <div class="row">
        <div class="col">
            Innehållsyta
        </div>
    </div>
</div>

Initiera JavaScript

Vill du köra JavaScript på din Meny och inte på andra komponenter så kan du använda koden nedan.

komponentbibliotek.menu.init();

Vill du köra JavaScript på din Meny i Angular och inte på andra komponenter så kan du använda koden nedan.

import { Component, AfterViewInit} from '@angular/core';

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: ['']
})

export class exampleComponent implements AfterViewInit {

  windowRef: any;

  constructor() {
    this.windowRef = window;
  }

  ngAfterViewInit() {
    if(this.windowRef.komponentbibliotek) {
      this.windowRef.komponentbibliotek.menu.init();
    }
  }
}

Senast publicerad 2020-11-20

Sidansvarig för sidan är Styleguide