UHasselt Component Library

App-Breadcrumbs 

<nav class='mol-breadcrumbs'>
    <ol>
        <li>
            <a href="" class="atm-link " aria-label="" title="">

                <span class="text">Home</span>

            </a>
            <span class="atm-icon fal fa-slash  fa-sm " aria-hidden="true"></span>
        </li>
        <li>
            <a href="" class="atm-link " aria-label="" title="">

                <span class="text">Level 1</span>

            </a>
            <span class="atm-icon fal fa-slash  fa-sm " aria-hidden="true"></span>
        </li>
        <li>
            <a href="" class="atm-link " aria-label="" title="">

                <span class="text">Level 2</span>

            </a>
            <span class="atm-icon fal fa-slash  fa-sm " aria-hidden="true"></span>
        </li>
        <li>
            Current page
        </li>
    </ol>
</nav>
 
<nav class='mol-breadcrumbs'>
    <ol>
        {{#each page}}
            <li>
                {{#if isCurrent}}
                    {{text}}
                {{else}}
                    {{render '@app-link' link}}{{render '@app-icon' @root.icon}}
                {{/if}}
            </li>
        {{/each}}
    </ol>
</nav>
 
{
  "icon": {
    "style": "fal",
    "icon": "fa-slash",
    "size": "fa-sm"
  },
  "page": [
    {
      "isCurrent": false,
      "link": {
        "text": "Home"
      }
    },
    {
      "isCurrent": false,
      "link": {
        "text": "Level 1"
      }
    },
    {
      "isCurrent": false,
      "link": {
        "text": "Level 2"
      }
    },
    {
      "isCurrent": true,
      "text": "Current page"
    }
  ]
}
  • Content: 
    .mol-breadcrumbs {
    ol {
        @apply flex flex-wrap;

        li {
            @apply whitespace-nowrap flex items-center text-sm md:text-md;

            a {
                @apply underline;
            }
        }
    }

    .atm-icon {
        @apply mx-1 text-gray transform rotate-62;
    }
}
  • URL: /components/raw/app-breadcrumbs/app-breadcrumbs.css
  • Filesystem Path: src\components\08-app-molecules\app-breadcrumbs\app-breadcrumbs.css
  • Size: 322 Bytes

No notes defined.