Vebego Component Library

Breadcrumbs 

<div class="vebego-container" id="breadcrumbs-container">
    <nav class="breadcrumbs test" role="navigation">
        <span class="crumb">
            <a class="atm-link " href="#" title="Betekenisvol werk" aria-label="" target="">Betekenisvol werk</a>
            <i class="atm-icon  far fa-external-link   "></i>

        </span>
        <span class="crumb">
            <a class="atm-link " href="#" title="Voor medewerkers" aria-label="" target="">Voor medewerkers</a>
            <i class="atm-icon  far fa-external-link   "></i>

        </span>
    </nav>
</div>
 
<div class="vebego-container" id="breadcrumbs-container">
    <nav class="breadcrumbs test" role="navigation">
        {{#each links}}
            <span class="crumb">
                {{ render '@link' this merge=true }}
                {{ render '@icon' icon}}
            </span>
        {{/each}}
    </nav>
</div>
 
{
  "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)] pl-4 pr-4 lg:pl-8 lg:pr-8;

    &.hide {
        display: none;
    }
}

.breadcrumbs {
    @apply font-display items-center flex gap-4 text-sm text-[#1e1e1e];

    .crumb {
        @apply flex items-center gap-4 w-max;

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

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

No notes defined.