Gå til sidens indhold

Komponenter

Sidenavigation

Sidenavigation giver brugerne overblik over struktur og indhold, så de kan finde vej til det indhold, de leder efter. Navigationen kan være med eller uden information:

  • Normal sidenavigation indeholder kun en beskrivelse i overskrift af hvert niveau i hierarkiet.
  • Sidenavigation med information uddyber i en kort tekst, hvilket indhold brugerne kan finde på det enkelte niveau.

Retningslinjer

Tilgængelighed

Sidenavigationen skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tab-tasten til navigation.

Brugervenlighed

Anvendes til

  • Sidenavigation anvendes til at afspejle et navigations-hierarki i op til tre niveauer.
  • Sidenavigation anvendes til den sekundære navigation/undermenu på en side i en større løsning.

Anvendes ikke til

  • Sidenavigation bør ikke anvendes på mindre løsninger (mindre end 5 sider).
  • Hvis din løsning allerede har topmenu og evt. tilknyttet dropdown menu, bør du overveje at forenkle din navigation før du vælger en sidenavigation.

Vejledning

  • Marker det aktive punkt (”der hvor brugeren er”) i sidenavigationen.
  • Brug korte og præcise ord og begreber. De må eksempelvis gerne være kortere varianter af selve sidernes indholdstitler.
  • Undgå at lave for mange punkter.
  • Undgå at lave menuen for dyb – forsøg at undgå mere end 1-2 niveauer.

Normal sidenavigation

Ét niveau

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="active">

                    <div class="d-inline-block">
                        Current page

                    </div>
                </a>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>

2 niveauer

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="current">

                    <div class="d-inline-block">
                        Current page

                    </div>
                </a>

                <ul class="sidenav-sub_list">

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="" class="active">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>

3 niveauer

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="current">

                    <div class="d-inline-block">
                        Current page

                    </div>
                </a>

                <ul class="sidenav-sub_list">

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="" class="current">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                        <ul class="sidenav-sub_list">

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="" class="active">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                        </ul>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>

Sidenavigation med information

Ét niveau

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                        <p class="sidenav-information">Informationstekst
                            for parent link</p>

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="active">

                    <div class="d-inline-block">
                        Current page

                        <p class="sidenav-information">Informationstekst
                            for current link</p>

                    </div>
                </a>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                        <p class="sidenav-information">Informationstekst
                            for another link</p>

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>

2 niveauer

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                        <p class="sidenav-information">Informationstekst
                            for parent link</p>

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="current">

                    <div class="d-inline-block">
                        Current page

                        <p class="sidenav-information">Informationstekst
                            for current link</p>

                    </div>
                </a>

                <ul class="sidenav-sub_list">

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="" class="active">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                        <p class="sidenav-information">Informationstekst
                            for another link</p>

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>

3 niveauer

<div class="container mt-6 mb-6">
    <nav>
        <ul class="sidenav-list">

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Parent link

                        <p class="sidenav-information">Informationstekst
                            for parent link</p>

                    </div>
                </a>

            </li>

            <li>
                <a href="" class="current">

                    <div class="d-inline-block">
                        Current page

                        <p class="sidenav-information">Informationstekst
                            for current link</p>

                    </div>
                </a>

                <ul class="sidenav-sub_list">

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="" class="current">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                        <ul class="sidenav-sub_list">

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="" class="active">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                            <li>
                                <a href="">

                                    <div class="d-inline-block">
                                        Grandchild link

                                    </div>
                                </a>

                            </li>

                        </ul>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                    <li>
                        <a href="">

                            <div class="d-inline-block">
                                Child link

                            </div>
                        </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">

                    <div class="d-inline-block">
                        Another link

                        <p class="sidenav-information">Informationstekst
                            for another link</p>

                    </div>
                </a>

            </li>

        </ul>
    </nav>
</div>