Basic Usage

Define Your Breadcrumbs

Create a file called routes/breadcrumbs.php:

use Rawilk\Breadcrumbs\Facades\Breadcrumbs;
use Rawilk\Breadcrumbs\Support\Generator;

// Home
Breadcrumbs::for('home', fn (Generator $trail) => $trail->push('Home', route('home')));

// Home > About
Breadcrumbs::for(
    'about',
    fn (Generator $trail) => $trail->parent('home')->push('About', route('About'))
);

// Home > Blog
Breadcrumbs::for(
    'blog',
    fn (Generator $trail) => $trail->parent('home')->push('Blog', route('blog'))
);

// Home > Blog > [Category]
Breadcrumbs::for(
    'category',
    fn (Generator $trail, $category) => $trail->parent('blog')->push($category->title, route('category', $category->id))
);

// Home > Blog > [Category] > [Post]
Breadcrumbs::for(
    'post',
    fn (Generator $trail, $post) => $trail->parent('category', $post->category)->push($post->title, route('post', $post->id))
);

{tip} See Defining Breadcrumbs for more details.

Choose a Template

By default a TailwindCSS-compatible view will be rendered, so if you're using TailwindCSS you can skip this step. Note: this version of the tailwind template is utilizing classes from Tailwind UI, so if you don't have that included in your application, you may need to adjust the template or use a custom one.

In the config/breadcrumbs.php file, edit this line:

'view' => 'breadcrumbs::tailwind',

Other predefined templates include:

  • breadcrumbs::bootstrap4 - Bootstrap 4
  • breadcrumbs::bulma - Bulma
  • breadcrumbs::json-ld - JSON-LD Structured Data (<script /> tag, no visible output)
  • The path to a custom view: e.g. partials.breadcrumbs

{tip} See Custom Templates for more details.

Render the Breadcrumbs

Finally, call Breadcrumbs::render() in the view for each page, passing it the name of the breadcrumb to use and any additional parameters you need.

{{ Breadcrumbs::render('home') }}

{{ Breadcrumbs::render('category', $category) }}

{tip} See Outputting Breadcrumbs for other output options, and see Route-Bound Breadcrumbs for a way to link breadcrumb names to route names automatically.

← Previous Topic

Changelog

Next Topic →

Defining Breadcrumbs

Caught a mistake? Suggest an edit on Github