maryUI v2 released! Upgrade guide
maryUI

Breadcrumbs

This component uses ul and li HTML tags. Make sure you have an extra rule to not override them on your custom CSS.

Default

On small screens, it automatically hides all intermediate items.

  • Home
    • ...
  • Add document 
@php
    $breadcrumbs = [
        ['label' => 'Home'],
        ['label' => 'Documents'],
        ['label' => 'Add document'],
    ];
@endphp
 
<x-breadcrumbs :items="$breadcrumbs" />

Custom separator, icons & links 

@php
    $breadcrumbs = [
        [
            'link' => '#default',
            'icon' => 's-home',
        ],
        [
            'label' => 'Documents',
            'link' => '/docs/components/breadcrumbs',
            'icon' => 'o-document',
        ],
        [
            'label' => 'Add document',
            'icon' => 'o-plus',
        ],
    ];
@endphp
 
<x-breadcrumbs :items="$breadcrumbs" separator="o-slash" />

Tooltip & customization 

@php
    $breadcrumbs = [
        [
            'label' => 'Home',
            'icon' => 'm-home',
            'tooltip-left' => 'Tooltips are supported!',
        ],
        [
            'label' => 'Documents',
            'link' => '/docs/components/breadcrumbs',
            'tooltip' => 'Default position is top!',
        ],
        [
            'label' => 'Edit document',
            'tooltip-bottom' => 'Positions are changable!',
        ],
        [
            'label' => '# 42',
            'tooltip-right' => 'And one from the right',
        ],
    ];
@endphp
 
<x-breadcrumbs
    :items="$breadcrumbs"
    separator="m-minus"
    separator-class="text-warning"
    class="bg-base-300 p-3 rounded-box"
    icon-class="text-warning"
    link-item-class="text-sm font-bold"
/>
Made with by Robson Tenório and contributors.