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="691626236a6fe">
      <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" data-material-symbol="bookmark" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="691626236a752">
                    </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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="691626236a7bd">
                    </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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="691626236a818">
                    </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