Breadcrumb

Breadcrumb shows where the user is, for example the path to the current folder, and lets them go back to any level above. You give it a list of BreadcrumbItem objects. The last item is the current page: it is plain text and is marked with aria-current="page". Every earlier item that has a key is a link-style button that emits select with that key.

Usage

<Breadcrumb items="$crumbs" label="Folder" (select)="openCrumb" />
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="openSubfolder">Open a subfolder</button>

<?php

use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Navigation\BreadcrumbItem;

class FolderPage extends BaseComponent
{
    public array $crumbs = [];
    public int $counter = 0;

    public function mounted()
    {
        $this->crumbs = [
            new BreadcrumbItem('Home', 'home', 'bi-house-door'),
            new BreadcrumbItem('Projects', 'projects'),
            new BreadcrumbItem('Website', 'website'),
            new BreadcrumbItem('Images', 'images'),
        ];
    }

    // Keep every crumb up to the chosen one, drop the rest.
    public function openCrumb($key)
    {
        $trail = [];
        $found = false;
        foreach ($this->crumbs as $crumb) {
            if (!$found) {
                $trail[] = $crumb;
                if ($crumb->key === $key) {
                    $found = true;
                }
            }
        }
        $this->crumbs = $trail;
    }

    public function openSubfolder()
    {
        $this->counter++;
        $folder = new BreadcrumbItem('Folder ' . $this->counter, 'folder-' . $this->counter);
        $this->crumbs = [...$this->crumbs, $folder];
    }
}

Breadcrumb does not change its items. Your component handles select (for example, opens that folder or navigates to a route) and passes the new list.

Long paths

On screens narrower than 920px the items between the first one and the last two are hidden, and … / is shown in their place. A deep path stays on one line. Click "Open a subfolder" a few times and make the window narrow to see it.

Properties

Breadcrumb

items - list of BreadcrumbItem objects, from the top level to the current page. Default: [].

label - (optional) accessible name (aria-label) of the nav element. Default: Breadcrumb.

BreadcrumbItem

BreadcrumbItem is a data class. Create it with new BreadcrumbItem($label, $key, $icon).

label - the text of the item.

key - (optional) the value emitted with select when the item is clicked. With null the item is plain text. The last item is always plain text. Default: null.

icon - (optional) icon shown before the label. Default: `` (empty), no icon.

Events

Breadcrumb

(select) - happens when the user clicks an item. The event value is the item's key.