Commentary

Breadcrumbs are simple navigational hierarchies to indicate the path to the current page location. The breadcrumb navigation component uses a nav HTML tag containing an ordered ol list.

The default link separator is "/". Three additional traditional separator types can be used and are set in the file "initial-core-variables.css" in the variable --breadcrumb-separator. Note that you can use any other text character that you want by setting the separator variable.

Three additional size options and two additional positioning options are also available (left aligned is default).

Usage

Classes:
.breadcrumb Defines main container for breadcrumb, typically nav HTML tag is used at top level.
Positioning options: .is-centered, .is-right
Separator options: Set in variable --breadcrumb-separator. Default = "/", arrow-separator = ">", bullet-separator = "\02022" or quote-separator = "\BB". Others can be set as desired.
Size options: .is-small, .is-medium, .is-large
Dependencies:
File: breadcrumb.css
Variables: --breadcrumb-separator, --link, --pad-horz, --size-4, --size-5, --size-7, --text-darker

Examples

Default Breadcrumb and Position

Default Position Left

Position Centered

Position Right


                <nav class="breadcrumb [is-centered, is-right]" aria-label="breadcrumbs">
                    <ol>
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#" aria-current="page">Four</a></li>
                    </ol>
                </nav>

Beadcrumb Sizes and Icons

Normal Size

Small Size

Medium Size

Large Size


                <nav class="breadcrumb [is-small, is-medium, is-large]" aria-label="breadcrumbs">
                    <ol>
                        <li><a href="#"><span class="icon-bg-bell"></span> One</a></li>
                        <li><a href="#"><span class="icon-bg-music"></span> Two</a></li>
                        <li><a href="#"><span class="icon-bg-file"></span> Three</a></li>
                        <li><a href="#" aria-current="page"><span class="icon-bg-clock"></span> Four</a></li>
                    </ol>
                </nav>