Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Venstremenu
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
på <ul>
elementet.
<nav>
<ul class="sidenav-list" role="menu">
<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 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.