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; } } } }