Kruimelpad - breadcrumb-bar

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
  3. Voeg de bijbehorende HTML toe. Voor meer informatie zie: Voorbeelden.

Voorbeelden:

Paragraaf

Visueel voorbeeld:

Bijbehorende 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/breadcrumb-bar";

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizotal-view.

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
    --breadcrumb-bar-flex-direction: ;
    --breadcrumb-bar-justify-content: ;
    --breadcrumb-bar-align-items: ;
    --breadcrumb-bar-gap: ;
    --breadcrumb-bar-padding-top: ;
    --breadcrumb-bar-padding-right: ;
    --breadcrumb-bar-padding-bottom: ;
    --breadcrumb-bar-padding-left: ;
    --breadcrumb-bar-max-width: ;
    --breadcrumb-bar-background-color: ;
    --breadcrumb-bar-text-color: ;
    --breadcrumb-bar-border-width: ;
    --breadcrumb-bar-border-style: ;
    --breadcrumb-bar-border-color: ;
    --breadcrumb-bar-border-radius: ;
    --breadcrumb-bar-min-height: ;

    /* Hover */
    --breadcrumb-bar-hover-text-color: ;

    /* List */
    --breadcrumb-bar-list-padding: ;
    --breadcrumb-bar-list-gap: ;
    --breadcrumb-bar-list-vertical-align: ;

    /* List item */
    --breadcrumb-bar-list-item-gap: ;

    /* Icon */
    --breadcrumb-bar-icon: ;
    --breadcrumb-bar-icon-font-family: ;
    --breadcrumb-bar-icon-font-size: ;
    --breadcrumb-bar-icon-padding-right: ;
    --breadcrumb-bar-icon-padding-left: ;
    --breadcrumb-bar-icon-margin-left: ;
    --breadcrumb-bar-icon-margin-right: ;

    /* Last item / current page */
    --breadcrumb-bar-list-item-last-child-font-weight: ;

    /* Link */
    --breadcrumb-bar-link-text-decoration: ;
    --breadcrumb-bar-link-white-space: ;

    /* Link hover */
    --breadcrumb-bar-link-hover-text-decoration: ;
}