Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Venstremenu

Venstremenuen strukturerer et navigationshierarki med op til tre niveauer i en vertikal liste.

Åbn dette eksempel i et nyt vindue: sidenav-normal-level1
Eksempel på venstremenu med ét niveau

Sådan bruges komponenten

Anvendes til

Venstremenu anvendes til at afspejle et navigationshierarki i op til tre niveauer.

Venstremenu anvendes til den sekundære navigation/undermenu på en side i en større løsning.

Anvendes ikke til

Venstremenu bør ikke anvendes på mindre løsninger (mindre end 5 sider).

Hvis din løsning allerede har topmenu og evt. tilknyttet dropdown, bør du overveje at forenkle din navigation før du vælger en venstremenu.

Vejledning

Markér det aktive punkt (”der hvor brugeren er”) i venstremenuen.

Brug korte og præcise ord og begreber. Titlerne i venstremenuen skal stemme overens med overskriften på de sider, de linker til.

Undgå at lave for mange punkter.

Undgå at lave menuen for dyb – forsøg at undgå mere end 1-2 niveauer.

Varianter

2 niveauer

Åbn dette eksempel i et nyt vindue: sidenav-normal-level2
Eksempel på venstremenu med to niveauer
Gå til eksemplets kode: sidenav-normal-level2

3 niveauer

Åbn dette eksempel i et nyt vindue: sidenav-normal-level3
Eksempel på venstremenu med tre niveauer
Gå til eksemplets kode: sidenav-normal-level3

Ekstra information

Åbn dette eksempel i et nyt vindue: sidenav-information-level1
Eksempel på venstremenu med hjælpetekst på ét niveau
Gå til eksemplets kode: sidenav-information-level1

Fra version 10.0.0 vises anchorlinks ikke længere i venstremenuen. Se anchorlinks-komponenten for nye retningslinjer.

Referencer

Derek Powazek: Where Am I? (2006)

Installation

HTML Struktur

Kodeeksempel
<nav aria-label="Eksempel på venstremenu">
    <ul class="sidemenu">

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

        <li class="active current">
            <a href="#" class="nav-link" aria-current="page">

                <span>Side</span>

            </a>

        </li>

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

    </ul>
</nav>

Aktive menupunkter

  • Klassen active sættes på de li-elementer, som enten er valgt eller aktivt viser undermenuer (disse elementer får en farvet streg i venstre side).
  • Klassen current sættes på det li-element, der viser den nuværende side (dette element vises med fed tekst og grå baggrund).

Tilføj ikon og information i venstremenu

  • For at tilføje et ikon til et punkt i venstremenuen bruges klassen sidenav-icon-before.
  • For at tilføje information til et punkt i venstremenuen bruges klassen sidenav-information.
  • Ikoner og informationer kan også sammensættes i én venstremenu.

2 niveauer

Vis dette eksempel i et nyt vindue: sidenav-normal-level2
Kodeeksempel
<nav aria-label="Eksempel på venstremenu med to niveauer">
    <ul class="sidemenu">

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

        <li class="active">
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>
            <ul>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

                <li class="active current">
                    <a href="#" class="nav-link" aria-current="page">

                        <span>Underside</span>

                    </a>

                </li>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

            </ul>
        </li>

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

    </ul>
</nav>
Gå til eksemplets retningslinjer

3 niveauer

Vis dette eksempel i et nyt vindue: sidenav-normal-level3
Kodeeksempel
<nav aria-label="Eksempel på venstremenu med tre niveauer">
    <ul class="sidemenu">

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

        <li class="active">
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>
            <ul>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

                <li class="active">
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>
                    <ul>

                        <li>
                            <a href="#" class="nav-link">

                                <span>Underunderside</span>

                            </a>

                        </li>

                        <li>
                            <a href="#" class="nav-link">

                                <span>Underunderside</span>

                            </a>

                        </li>

                        <li class="active current">
                            <a href="#" class="nav-link" aria-current="page">

                                <span>Underunderside</span>

                            </a>

                        </li>

                        <li>
                            <a href="#" class="nav-link">

                                <span>Underunderside</span>

                            </a>

                        </li>

                    </ul>
                </li>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

                <li>
                    <a href="#" class="nav-link">

                        <span>Underside</span>

                    </a>

                </li>

            </ul>
        </li>

        <li>
            <a href="#" class="nav-link">

                <span>Side</span>

            </a>

        </li>

    </ul>
</nav>
Gå til eksemplets retningslinjer

Ekstra information

Vis dette eksempel i et nyt vindue: sidenav-information-level1
Kodeeksempel
<nav aria-label="Eksempel på venstremenu med information">
    <ul class="sidemenu">

        <li>
            <a href="#" class="nav-link">

                <div>
                    <span>Side</span>
                    <span class="sidenav-information">Informationstekst for side</span>
                </div>

            </a>

        </li>

        <li class="active current">
            <a href="#" class="nav-link" aria-current="page">

                <div>
                    <span>Side</span>
                    <span class="sidenav-information">Informationstekst for side</span>
                </div>

            </a>

        </li>

        <li>
            <a href="#" class="nav-link">

                <div>
                    <span>Side</span>
                    <span class="sidenav-information">Informationstekst for side</span>
                </div>

            </a>

        </li>

    </ul>
</nav>
Gå til eksemplets retningslinjer