Vebego Component Library

Breadcrumbs 

<nav class="breadcrumbs" role="navigation">
    <span class="crumb">
        <a class="atm-link " href="#" title="Betekenisvol werk" aria-label="" target="">Betekenisvol werk</a>
        <span class="atm-icon  far fa-external-link   "></span>
    </span>
    <span class="crumb">
        <a class="atm-link " href="#" title="Voor medewerkers" aria-label="" target="">Voor medewerkers</a>
        <span class="atm-icon  far fa-external-link   "></span>
    </span>
</nav>
 
<nav class="breadcrumbs" role="navigation">
    {{#each links}}
        <span class="crumb">
            {{ render '@link' this merge=true }}
            {{ render '@icon' icon}}
        </span>
    {{/each}}
</nav>
 
{
  "icon": {
    "style": "fal",
    "icon": "fa-chevron-right"
  },
  "links": [
    {
      "href": "#",
      "title": "Betekenisvol werk",
      "text": "Betekenisvol werk"
    },
    {
      "href": "#",
      "title": "Voor medewerkers",
      "text": "Voor medewerkers"
    }
  ]
}
  • Content: 
    #breadcrumbs-container{
    @apply pt-[var(--breadcrumbs-padding-top)];
    .breadcrumbs {
        @apply mb-16;
    }
}

.breadcrumbs {
    @apply font-display w-full items-center inline-flex flex-wrap gap-4 gap-y-[0.5rem] text-sm text-[#1e1e1e];
    flex-wrap: wrap;

    .crumb {
        @apply inline whitespace-normal gap-4 leading-[1.4rem];
        word-wrap: break-word;
        white-space: normal;

        .atm-link {
            @apply underline-offset-4 text-gray;
        }

        .atm-icon {
            @apply ml-2;
        }

        &:last-of-type {
            @apply font-medium;
        }
    }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.css
  • Filesystem Path: src\components\03-molecules\breadcrumbs\breadcrumbs.css
  • Size: 646 Bytes

No notes defined.