Header visueel voorbeeld

Benodigde stappen:

1. Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.

Voorbeelden:

Voor het visuele voorbeeld zie de header van deze pagina.

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>

CSS-voorbeeld:

Ingestelde variabelen voor deze weergave

:root {
  --header-navigation-background-color: #fff;
  --header-navigation-text-color: var(--text-set-text-color);
  --header-navigation-padding-right: 2%;
  --header-navigation-padding-left: 2%;

  /* top border */
  --header-navigation-border-width: 3px 0 0 0;
  --header-navigation-border-color: var(--branding-color-1);

  /* Menu items links */
  --header-navigation-link-border-width: 4px 0 0 0;
  --header-navigation-link-border-color: transparent;
  --header-navigation-link-min-height: 3rem;
  --header-navigation-link-font-size: var(--body-text-medium-font-size);

  /* Link styling */
  --header-navigation-link-text-color: var(--application-base-text-color);
  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);

  /* Hover */
  --header-navigation-link-hover-border-color: #ede1c7;
  --header-navigation-link-hover-text-color: var(--header-navigation-link-text-color);

  /* Active link */
  --header-navigation-link-active-border-color: var(--branding-color-1);
  --header-navigation-link-active-text-color: var(--header-navigation-link-hover-text-color);
  --header-navigation-link-visited-active-text-color: var(--header-navigation-link-hover-text-color);

  /* Collapsed icon */
  --navigation-collapsible-menu-icon-font-size: 2rem;
}