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="673eda34ce52f">
      <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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="bookmark" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673eda34ce574">
                    </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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673eda34ce5ca">
                    </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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673eda34ce617">
                    </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).
truncate NULL - The number of letters until item is truncated.
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