Breadcrumb

A simple breadcrumb component to improve your navigation experience

Sizes

You can choose between 5 additional sizes: is-tiny, is-small, is-medium, is-large, and is-jumbo.

Example Tiny

HTML 

<nav class="breadcrumb is-tiny" aria-label="breadcrumbs">
                        <ul>
                        <li><a href="#">Bulma</a></li>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
                        </ul>
                        </nav>

Example Small

HTML 

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
                        <ul>
                        <li><a href="#">Bulma</a></li>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
                        </ul>
                        </nav>

Example Medium

HTML 

<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
                        <ul>
                        <li><a href="#">Bulma</a></li>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
                        </ul>
                        </nav>

Example Large

HTML 

<nav class="breadcrumb is-large" aria-label="breadcrumbs">
                        <ul>
                        <li><a href="#">Bulma</a></li>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
                        </ul>
                        </nav>

Example Jumbo

HTML 

<nav class="breadcrumb is-jumbo" aria-label="breadcrumbs">
                        <ul>
                        <li><a href="#">Bulma</a></li>
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
                        </ul>
                        </nav>