Huesos
Style
Guide

Repositoire

GitHub

Preview

Breadcrumb

Sets a horizontal navigation that indicates the user the “path” or hierarchy followed until the current page.

You can set the UNICODE element that marks the hierarchy by setting $breadcrumb-arrow.

$breadcrumb-kill-links will delete kill decoration (wich is the default behavior) while $breadcrumb-font-size allows you to set a font size.

Example

<section>
    <nav class="breadcrumb">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">About us</a></li>
            <li><span>Contact</span></li>
            <li><span class="disabled">Exit</span></li>
        </ul>
    </nav>
</section>

Assets

  • Filesystem Path: src/components/navigation/breadcrumb/_breadcrumb.scss
  • Size: 587 Bytes 
  • .breadcrumb {
    @if $breadcrumb-font-size != false {
        @include ritmo-font-size($breadcrumb-font-size);
    }
    ul,
    ol {
        @include inline-list();
    }
    @if $breadcrumb-kill-links {
        a {
            @include kill-link-decoration();
        }
    }
    li {
        margin-bottom:0;
        @if $breadcrumb-arrow {
            &:after {
                content: $breadcrumb-arrow;
                padding: 0 $gutter / 6;
            }
            &:last-child:after {
                content:"";
                display:none;
            }
        }
    }
}