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
  • Content:
    .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;
                }
            }
        }
    }