You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.7 KiB
92 lines
2.7 KiB
---
|
|
layout : 'default'
|
|
css : 'breadcrumb'
|
|
title : 'Breadcrumb'
|
|
description : 'A breadcrumb is a menu to show the location of the current section in relation to other sections.'
|
|
type : 'UI Collection'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">Elements</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">A simple breadcrumb</h4>
|
|
<div class="ui breadcrumb">
|
|
<a class="section">Food</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Fruit</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Elements</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">A divider</h4>
|
|
<p>A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.</p>
|
|
<div class="ui breadcrumb">
|
|
<a class="section">Food</a>
|
|
<i class="right arrow icon divider"></i>
|
|
<a class="section">Fruit</a>
|
|
<i class="right arrow icon divider"></i>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">A section</h4>
|
|
<p>A breadcrumb can contain sections that can either be formatted as a link or text</p>
|
|
<div class="ui breadcrumb">
|
|
<a class="section">Food</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Fruit</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>A breadcrumb can vary in size</p>
|
|
<div class="ui small breadcrumb">
|
|
<a class="section">Food</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Fruit</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui large breadcrumb">
|
|
<a class="section">Food</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Fruit</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui huge breadcrumb">
|
|
<a class="section">Food</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Fruit</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Apples</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|