Gå til sidens indhold

Kode

Sidenavigation

Eksempler og retningslinjer

Installation

HTML Struktur

<nav>
    <ul class="sidenav-list" role="menu">
        <li role="none">
            <a href="" role="menuitem">
                Hovedside
            </a>

        </li>
        <li class="current  " role="none">
            <a href="" role="menuitem" aria-current="true">
                Hovedside
            </a>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="" role="menuitem">
                        Underside
                    </a>

                </li>
                <li class=" active " role="none">
                    <a href="" role="menuitem" aria-current="page">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="" role="menuitem">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="" role="menuitem">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="" role="menuitem">
                        Underside
                    </a>

                </li>
            </ul>

        </li>
        <li role="none">
            <a href="" role="menuitem">
                Hovedside
            </a>

        </li>
    </ul>
</nav>

Aktive menupunkter

  • Aktive menupunkter skal have klassen current.
  • Kun det sidste aktive menupunkt skal have klassen active.
  • Hvis der kun er ét aktivt niveau sættes begge klasser.

Anchor links

Hvis en undermenu består af links til områder på den aktuelle side tilføjes klassen has-anchor-links<ul> elementet.

<nav>
    <ul class="sidenav-list">
        <li role="none">
            <a href="" role="menuitem">
                Hovedside
            </a>

        </li>
        <li class="current  active  has-anchor-links" role="none">
            <a href="" role="menuitem" aria-current="true"
                aria-current="page">
                Hovedside
            </a>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
            </ul>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
            </ul>
        </li>
    </ul>
</nav>

Tilføj ikon og information i sidenavigation

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