---
title: Breadcrumbs
---

# Breadcrumbs

<div class="documentation__toc"></div>

## Introduction

Breadcrumbs in general are automated. However they can be modified, disabled, and managed manually too.

To manage breadcrumbs you must first include the `\Anomaly\Streams\Platform\Ui\Breadcrumb\BreadcrumbCollection` class.

### Adding Breadcrumbs

Use the `add` method to add a breadcrumb to the end of the collection.

```php
$breadcrumbs = app(\Anomaly\Streams\Platform\Ui\Breadcrumb\BreadcrumbCollection::class);

$breadcrumbs->add('anomaly.module.products::breadcrumb.products', '/products');
```

Breadcrumbs are available as a property in controllers by default.{.tip}

```php
<?php namespace Anomaly\ProductsModule\Http\Controller;

use Anomaly\ProductsModule\Category\Contract\CategoryRepositoryInterface;
use Anomaly\Streams\Platform\Http\Controller\PublicController;

class CategoriesController extends PublicController
{

    /**
     * View products within a category.
     *
     * @param CategoryRepositoryInterface $categories
     * @return \Illuminate\Contracts\View\View
     */
    public function view(CategoryRepositoryInterface $categories)
    {
        $category = $categories->findByPath($this->route->getParameter('path'));

        $this->breadcrumbs->add(
            'module::breadcrumb.products',
            $url->route('anomaly.module.products::products.index')
        );

        $this->breadcrumbs->add($category->getName(), $this->url->make('anomaly.module.products::category', $category));

        return $this->view->make('anomaly.module.products::categories/view');
    }
}
```

### Displaying Breadcrumbs

You can use the `breadcrumb` plugin function to display breadcrumbs easily.

```twig
{{ breadcrumb() }}
```

The breadcrumb collection is loaded into the `template` super variable letting you display breadcrumbs manually as well.

```twig
<ol class="breadcrumb">
    {% for key, url in template.breadcrumbs %}

        {% if loop.last %}
            <li class="active">{{ trans(key) }}</li>
        {% else %}
            <li><a href="{{ url }}">{{ trans(key) }}</a></li>
        {% endif %}

    {% endfor %}
</ol>
```
