Breadcrumb

Used to indicate where the user is in the structure of a page.

Breadcrumb 

<!-- breadcrumb.blade.php -->
<nav class="c-breadcrumb" aria-label="Breadcrumb" data-uid="662d66396b4eb">
      <span class="c-breadcrumb__prefix u-sr__only">
      You are here: 
    </span>
    <ol class="c-breadcrumb__list unlist">
     
      <li data-level="1" class="c-breadcrumb__item c-breadcrumb__item_0 c-breadcrumb__item_depth-1">
        
                      <!-- icon.blade.php -->
    <span class="c-icon c-icon--bookmark c-icon--material c-icon--material-bookmark material-symbols-outlined material-symbols-outlined--filled c-icon--size-inherit" material-symbol="bookmark" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d66396b534">
            </span>
          
         
          <a class="c-breadcrumb__link" href="https://hbgworks.helsingborg.se">
            <span class="c-breadcrumb__label">
               Main page
            </span>
          </a>
        
      </li>
     
      <li data-level="1" class="c-breadcrumb__item c-breadcrumb__item_1 c-breadcrumb__item_depth-1">
        
                      <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-inherit" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d66396b579">
            </span>
          
         
          <a class="c-breadcrumb__link" href="https://hbgworks.helsingborg.se">
            <span class="c-breadcrumb__label">
               Sub page
            </span>
          </a>
        
      </li>
     
      <li data-level="1" class="c-breadcrumb__item c-breadcrumb__item_2 c-breadcrumb__item_depth-1">
        
                      <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-inherit" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d66396b5b7">
            </span>
          
         
          <span class="c-breadcrumb__label" aria-current="page">
            Sub sub page
          </span>
        
      </li>
      </ol>
</nav>
@breadcrumb(
    [
        'prefixLabel' => 'You are here: ',
        'list' => [
            ['href' => 'https://hbgworks.helsingborg.se', 'label' => 'Main page'],
            ['href' => 'https://hbgworks.helsingborg.se', 'label' => 'Sub page'],
            ['href' => 'https://hbgworks.helsingborg.se', 'label' => 'Sub sub page'],
        ]
    ]
)
@endbreadcrumb

Blade component parameters

Key Default value Type Available values Description
list [] array - Array of breadcrumb items.
label Breadcrumb string - The aria-label of the component
componentElement nav string - What element to wrap this component with.
listType ol string - The list type ol/ul
listItemType li string - The item type: li
prefixLabel string - The label before the breadcrumb items (screen reader only).
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Breadcrumb/breadcrumb.json