Header
De header-navigation wordt vaak gebruikt als extra navigatiepunt en om aan te geven aan de gebruiker dat het einde van de pagina bereikt is.
Benodigde stappen
- Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
- Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.
Voorbeelden
Alleen navigatie
Visueel voorbeeld
HTML-voorbeeld
<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
</div>
</nav>
</header>
Navigatie met content wrapper
Visueel voorbeeld
HTML-voorbeeld
<header>
<div>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
</div>
</nav>
</div>
</header>
Navigatie met zoekveld
Visueel voorbeeld
HTML-voorbeeld
<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width:42rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
<div>
<form class="inline">
<input type="text" placeholder="Zoeken" />
<button type="submit">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="visually-hidden">Zoeken</span>
</button>
</form>
</div>
</div>
</nav>
</header>
Navigatie en logo
Visueel voorbeeld
HTML-voorbeeld
<header>
<div>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<a href="/" class="logo">
<img src="/img/logo-white.svg" alt="Placeholder logo">Manon
</a>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
</div>
</nav>
</div>
</header>
Navigatie met meerdere menu's
Visueel voorbeeld
HTML-voorbeeld
<header>
<div>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
<ul>
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</nav>
</div>
</header>
Navigatie met formulier-knop
Visueel voorbeeld
HTML-voorbeeld
<header>
<div>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
<ul class="actions">
<li><a href="/examples/header-navigation-with-form-button" class="avatar">A</a></li>
<li>
<form action="/logout" method="POST" class="inline">
<input type="hidden" name="_token" value="">
<button type="submit">Logout</button>
</form>
</li>
</ul>
</div>
</nav>
</div>
</header>
Navigatie met logo bovenaan
Visueel voorbeeld
HTML-voorbeeld
<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<a href="/" class="logo">
<img src="/img/logo.svg" alt="Placeholder logo">Manon
</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 30rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
<ul>
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</nav>
</header>
Bijbehorende bestanden
Voeg de (s)css-bestanden toe aan het project of importeer de bestanden. Hiervoor kunnen de bestanden gebruikt worden uit beschikbare Manon-thema's. Of uit zelf gemaakte thema's.
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld
@use "@minvws/manon/header-navigation";