Skip to content
A breadcrumbs generator fully customizable that use the Fluent pattern
PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
src
tests
.gitignore
.phpdoc-md.php
.travis.yml
LICENSE
README.md
composer.json
phpunit.xml

README.md

Breadcrumbs

Travis Coverage Stable Version Downloads PHP License
Build Status Coverage Status Latest Stable Version Total Downloads Laravel 5.4 License

A breadcrumbs generator that use the Fluent pattern. This library is inspired by creitive/breadcrumbs but was fully rewritten to be fully customizable.

Requirement

PHP

Installation

composer require xety/breadcrumbs

Usage

Instance

To use the Breadcrumbs class, you just need to instance it :

use Xety\Breadcrumbs\Breadcrumbs;

$breadcrumbs = new Breadcrumbs;

// Or with breadcrumbs and options:
$breadcrumbs = new Breadcrumbs(
    [
        [
            'name' => 'Home',
            'href' => '/home'
        ],
        [
            'name' => 'Blog',
            'href' => '/blog'
        ]
    ],
    [
        'position' => true
    ]
);

Output

To render your breadcrumbs, you can invoke the function render() or directly "echoing" it:

echo $breadcrumbs->render();

// Or, since this class implement the magic method `__toString()`,
// you can directly echo the instance :
echo $breadcrumbs;

Output examples:

This class is configured by default to render with the Bootstrap 4 style. So with the above configuration, the output will look like that :

<nav class="breadcrumb">
    <a data-position="1" class="breadcrumb-item" href="/home">Home</a>
    <span data-position="2" class="breadcrumb-item active" href="/blog">Blog</span>
</nav>

Full featured example :

$breadcrumbs = new Breadcrumbs(
    [
        [
            'name' => 'Home',
            'href' => '/home'
        ],
        [
            'name' => 'Blog',
            'href' => 'blog' // Note there is no `slash` here.
        ],
        [
            'name' => 'Test',
            'href' => 'http://xeta.io/blog/test'
        ],
        [
            'name' => 'Article',
            'href' => '/article'
        ]
    ],
    [
        'position' => true,
        'divider' => '#',
        'dividerElement' => 'li',
        'dividerElementClasses'=> [
            'custom',
            'divider'
        ],
        'listElement' => 'ul',
        'listElementClasses' => [
            'custom',
            'container'
        ],
        'listItemElement' => 'li',
        'listItemElementClasses' => [
            'custom',
            'item'
        ],
        'listActiveElement' => 'li',
        'listActiveElementClasses' => [
            'custom',
            'active'
        ]
    ]
);

Output :

<ul class="custom container">
    <li data-position="1" class="custom item" href="/home">Home</li>
    <li class="custom divider">#</li>
    <li data-position="2" class="custom item" href="/blog">Blog</li> <!-- The slash has been automaticaly set by the class -->
    <li class="custom divider">#</li>
    <li data-position="3" class="custom item" href="http://xeta.io/blog/test">Test</li>
    <li class="custom divider">#</li>
    <li data-position="4" class="custom active">Article</li>
</ul>

Options

This is the list of all available options and also all default options :

[
    // Whether to enable or not the `data-position` attribute.
    'position' => false,
    // The divider symbol between the crumbs or `null` to disable it.
    'divider' => null,
    // The DOM-Element used to generate the divider element.
    'dividerElement' => 'span',
    // Classes applied to the item `dividerElement` element.
    'dividerElementClasses'=> [
        'divider'
    ],
    // The DOM-Element used to generate the container element.
    'listElement' => 'nav',
    // Classes applied to the main `listElement` container element.
    'listElementClasses' => [
        'breadcrumb'
    ],
    // The DOM-Element used to generate the list item.
    'listItemElement' => 'a',
    // Classes applied to the list item `listItemElement` element.
    'listItemElementClasses' => [
        'breadcrumb-item'
    ],
    // The DOM-Element used to generate the active list item.
    'listActiveElement' => 'span',
    // Classes applied to the active item `listActiveElement` element.
    'listActiveElementClasses' => [
        'breadcrumb-item',
        'active'
    ]
]

Documentation

You can find all methods available with their documentation here.

Contribute

If you want to contribute, please follow this guide.

You can’t perform that action at this time.