Componentbibliotheek

8 navigatievarianten

Elke navigatiestijl die beschikbaar is in Studio CMS, live getoond met interactieve dropdowns en mobiele la's. Hover over items met pijltjes om de dropdown- en mega-menupanelen te zien. Gebruik Mobiele weergave om het mobiele hamburgermenu en de la op 390px te testen.

Standaard

style="default"

Horizontale navigatie met dropdowns bij hover. Dropdowns ondersteunen per item een icoon en beschrijving wanneer die zijn opgegeven. Klik op Mobiele weergave om de uitklapbare la te testen.

Gecentreerd

style="centered"

Logo gecentreerd in de merkbalk; navigatielinks op desktop in een tweede rij eronder. Uitklapbare la op mobiel.

Minimaal: uitschuivend

style="minimal"

Studio CMS

Neem contact op

Alleen een hamburgermenu op alle schermformaten. Klik op ☰ om de uitschuivende la met grote letters en geneste submenu's te zien.

Minimaal: donker paneel

style="minimal-panel"

Studio CMS

Het hamburgermenu opent een donker paneel dat van rechts inschuift met grote navigatielinks. Een icoonkaart-variant (style="minimal-panel-icons") toont elk item als een feature-kaart. Klik op de achtergrond of ✕ om te sluiten.

Mega menu

style="mega"

Studio CMSAan de slag

Aan de slag

Hover over Oplossingen of Bedrijf: het paneel over de volledige breedte loopt door over de hele navigatiebalk. Panelen ondersteunen links in meerdere kolommen, een kolom met uitgelichte berichten en een CTA-kaart. Uitklapbare la op mobiel.

Split: logo gecentreerd

style="split"

Navigatie-items symmetrisch verdeeld aan weerszijden van een gecentreerd logo. CTA verankerd uiterst rechts. Uitklapbare la op mobiel.

Transparant: wordt dekkend bij scrollen

style="transparent"

Scroll of gebruik de navigatie hierboven om de overgang van transparant naar dekkend te zien

Vast verankerd over een hero met transparante achtergrond. Scroll over de pagina (of gebruik de demo hieronder) om te zien hoe de balk overgaat naar een dekkend oppervlak met rand en schaduw zodra je voorbij 60px scrollt.