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:
Bijbehorende bestanden
Voeg de (s)css-bestanden toe aan het project of importeer de bestanden.
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";Instelbare variabelen
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --header-navigation-flex-direction | flex-direction | column | - | - |
| --header-navigation-gap | gap | var(--application-base-gap-medium) | - | - |
| --header-navigation-justify-content | justify-content | center | - | - |
| --header-navigation-align-items | align-items | flex-start | - | - |
| --header-navigation-flex-wrap | flex-wrap | wrap | - | - |
| --header-navigation-min-height | min-height | 10rem | - | - |
| --header-navigation-background-color | background-color | var(--application-base-tint-1-background-color) | - | - |
| --header-navigation-text-color | text-color | var(--application-base-tint-1-text-color) | - | - |
| --header-navigation-padding-top | padding-top | var(--content-padding-top) | - | - |
| --header-navigation-padding-right | padding-right | 5% | - | - |
| --header-navigation-padding-bottom | padding-bottom | var(--content-padding-bottom) | - | - |
| --header-navigation-padding-left | padding-left | 5% | - | - |
| --header-navigation-max-width | max-width | 100% | - | - |
| --header-navigation-link-text-color | text-color | var(--header-navigation-text-color) | - | - |
| --header-navigation-link-text-decoration | text-decoration | none | - | - |
| --header-navigation-link-hover-text-color | text-color | var(--header-navigation-link-text-color) | - | - |
| --header-navigation-link-hover-text-decoration | text-decoration | underline | - | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
--header-navigation-min-height: ;
--header-navigation-justify-content: ;
--header-navigation-align-items: ;
--header-navigation-flex-wrap: ;
--header-navigation-background-color: ;
--header-navigation-text-color: ;
--header-navigation-padding: ;
/* Links */
--header-navigation-link-text-color: ;
--header-navigation-link-text-decoration: ;
/* Links hover */
--header-navigation-link-hover-text-color: ;
--header-navigation-link-hover-text-decoration: ;
}