Navigatie CSS-klassen in het bluetronix CMS - overzicht & toepassing
In dit overzicht vind je alle belangrijke CSS-klassen van de navigatie in het bluetronix CMS. Leer hoe je met enkele aanpassingen het ontwerp, de responsiviteit en het gedrag van je menustructuur op maat kunt maken.
Navigatie CSS-klassen Beschrijving
Hier vind je een compacte overzicht welke CSS-klasse in jouw HTML-snippet waarvoor bedoeld is. Zo kun je layout en gedrag snel aanpassen.
Belangrijk: is een placeholder uit de navigatietabel (bijv. 00_Menue) en wordt bij het renderen vervangen door eigen klassen (bijv. voor zichtbaarheid, nadruk, iconen per menu-item).
Klassenoverzicht
| Klas | Gebruikt in | Doel / Betekenis | Typische interactie |
|---|---|---|---|
bx-DesktopHTML1 |
div boven de navigatiebalk | Bovenbalk boven het hoofdmenu (bijv. meldingen, promoties, app-banner). | Zichtbaarheid wordt geregeld via DB-placeholder (none). |
bx-DesktopHTML2 |
div onder de navigatiebalk | Onderbalk onder het hoofdmenu (extra info/medailles). | Zichtbaarheid via none. |
bx-nav-outer |
Wrapper om nav.bx-nav |
Buitenste container voor positionering (bijv. Sticky, schaduw, breedte). | Layout-raam voor volledige pagina-breedte. |
bx-nav |
nav Hoofdnavigatie | Basis-navbar (Grid/Flex, achtergrond, hoogte). | Globale navbar-stijlen en responsiviteit. |
bx-navbar-left |
Linkerkant van de navigatiebalk | Ruimte voor menu-icoon (burger) en logo. | Bevat .bx-nav-icon en .bx-nav-brand. |
bx-navbar-center |
Midden van de navigatiebalk | Container voor de menu-items (UL/LI) inclusief submenu's. | Vult Mobile/Sidebar via JS in (Bron: #bxNavPoints). |
bx-navbar-right |
Rechter kolom van de navigatiebalk | Icon-groep (Zoeken, Licht/Dark, Inloggen, Taal, Winkelwagentje, Sidebar). | Knoppen roepen JS-functies aan (bijv. BlueSearchBar()). |
bx-nav-icon |
knop / Icon-knoppen | Eenduidige stijl voor alle navigatiebalk-iconen. | Klikdoelen voor schakelaars (Mobile-Bar, Side-Bar, Zoeken, etc.). |
bx-nav-brand |
img Logo | Logo-weergave (grootte, afstanden). | Vaak met link naar /index.html. |
bx-nav-item |
li in het hoofdmenu | Lijst item van een menu item. | Kan worden gecombineerd met .has-submenu. |
bx-nav-link |
a in het menu | Stijl van de menu-link (lettertype, hover, actieve toestanden). | Ontvangt doel/naam via DB-placeholder. |
has-submenu |
li met dropdown | Markeert menu-item met submenu; activeert dropdown-stijlen. | Opent/sluit bijbehorende .bx-navbar-dropdown. |
submenu-toggle |
knop naast link | Besturingselement om het submenu in- en uit te klappen (Chevron-pictogram). | Meestal alleen zichtbaar op grotere schermen (zie utility-klassen). |
d-none, d-lg-inline |
Utility-klassen op de knop | Zichtbaarheidsbeheer (bijv. verbergen → vanaf lg inline weergeven). | Responsief gedrag van de toggle. |
bx-menu |
ul in de dropdown | Lijst van submenu-items. | Wordt gevuld via navigatie uit de database. |
bx-navbar-dropdown |
ul (Dropdown-container) | Dropdown-paneel (positionering, schaduw, animatie). | Opent per hover/klik of .submenu-toggle. |
bx-dropdown-item |
li in de dropdown | Enkel submenu-item. | Bevat .bx-dropdown-link. |
bx-dropdown-link |
a in de dropdown | Link-stijl binnen de dropdown. | Hover-/focus-toestanden voor betere gebruiksvriendelijkheid. |
bx-mobile-bar |
Mobiel menu (off-canvas rechts) | Container voor mobiele navigatie en optionele blokken boven/onder. | Wordt via JS gevuld (Bron: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blokken in de mobiele balk | Optionele HTML-gebieden boven/onder het mobiele menu (bijv. logo). | Zichtbaarheid via |
bx-side-bar |
Zij-navigatie (Off-Canvas links) | Container voor alternatieve/extra navigatie. | Kan het menu of eigen inhoud bevatten. |
bx-SideHTML1, bx-SideHTML2 |
Blokken in de zij-balk | Optionele HTML-gebieden boven/onder het zijmenu (bijv. groot logo). | Zichtbaarheid via |
WKGBAnzDiv |
Badge-wrapper in het winkelwagentje-icoon | Omhullend telgebied (Lay-out/Positie). | Bevat .WKGBAnzDivInner (Aantal). |
WKGBAnzDivInner |
Badge-innerlijke | Toont de huidige hoeveelheid in de winkelwagentje. | Wordt via JS gevuld via #WKGBAnz. |
Plaatsvervangende klassen uit de DB
| Plaatsvervanger | Beschrijving | Voorbeeld |
|---|---|---|
|
Wordt een menu-item vervangen door een of meer eigen klassen (bijv. only-desktop, highlight, icon-contact). | Bepaalt zichtbaarheid/stijl per knop in desktop-, mobiele- of zijbalk. |
Combineer .bx-nav-item met DB-gestuurde klassen via om afzonderlijke knoppen gericht zichtbaar of onzichtbaar te maken in #bxNavPoints (desktop), .bx-mobile-bar of .bx-side-bar, zonder de HTML-code te wijzigen.
FAQ
wat klanten ons vaak vragen
Hier ontdek je welke CSS-klassen in jouw Navbar-HTML verantwoordelijk zijn voor lay-out, gedrag en zichtbaarheid. Zo kun je gerichte aanpassingen aan de navigatie doen.
Wat betekent de placeholder ?
Deze placeholder wordt automatisch vervangen door eigen CSS-klassen die je in de navigatietabel (bijv. 00_Menu) instelt. Hiermee bepaal je zichtbaarheid, markering en iconen voor afzonderlijke menu-items.
Hoe kan ik inhoud boven of onder de Navbar plaatsen?
Gebruik hiervoor de klassen bx-DesktopHTML1 (boven) en bx-DesktopHTML2 (onder). Je kunt ze in het CMS via CMS ⯈ Website ⯈ Koptekst in- of uitblenden.
Wat is de functie van de klasse bx-nav-outer?
Het is de buitenste container van de navigatie. Hiermee bepaal je de breedte, schaduw of sticky-gedrag van de Navbar.
Waar staat bx-nav voor?
Deze klasse definieert de hoofdnav zelf – dat wil zeggen de lay-out (bijv. Flex/Grid), achtergrondkleur en hoogte van de Navbar.
Hoe is de Navbar onderverdeeld in kolommen?
De Navbar bestaat uit drie delen: bx-navbar-left (Logo & menu-icoon), bx-navbar-center (menu-items), bx-navbar-right (iconen zoals zoeken, inloggen, taal, winkelwagentje).
Wat doet de klasse bx-nav-icon?
Het zorgt voor een uniforme styling van alle Navbar-iconen. Deze knoppen regelen bijvoorbeeld het openen van Mobile-Bar, Side-Bar of de zoekfunctie.
Hoe kan ik menulinks stylen?
Met bx-nav-item definieer je de lijstitems, met bx-nav-link de stijlregels voor tekst, hover en actieve toestanden van de links.
Hoe werkt de besturing van submenu's?
Een menu-item met de klasse has-submenu bevat een dropdown. Met submenu-toggle (knop met pijl-icoon) kun je deze in- of uitklappen.
Wat betekenen de utility-klassen d-none en d-lg-inline?
Deze klassen regelen de zichtbaarheid van afzonderlijke elementen afhankelijk van de schermgrootte - ideaal voor responsieve navigaties.
Hoe is een dropdown-menu opgebouwd?
Een dropdown bestaat uit bx-navbar-dropdown (container), daarin bx-menu (lijst) met bx-dropdown-item en bx-dropdown-link voor de afzonderlijke subpunten.
Hoe werkt de Mobile-Bar?
De bx-mobile-bar opent rechts op mobiele apparaten als een Off-Canvas-menu. Deze wordt via JS gevuld met de inhoud van #bxNavPoints. Extra blokken kun je aanvullen met bx-MobilHTML1 en bx-MobilHTML2.
Wat is de Side-Bar?
De bx-side-bar is een zijlings Off-Canvas-menu (meestal links). Hier kun je eigen inhoud of navigatie-elementen plaatsen, aangevuld met bx-SideHTML1 en bx-SideHTML2.
Hoe wordt de winkelwagenteller weergegeven?
De wrapper WKGBAnzDiv bevat WKGBAnzDivInner, die via JS (over #WKGBAnz) het huidige aantal artikelen toont – meestal als een badge in het winkelwagenteken.
Hoe kan ik individuele knoppen alleen in bepaalde gebieden weergeven?
Combineer .bx-nav-item met . Zo kun je knoppen gericht in #bxNavPoints (Desktop), .bx-mobile-bar of .bx-side-bar in- of uitschakelen, zonder HTML-code te wijzigen.