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.
93 lines
2.7 KiB
93 lines
2.7 KiB
---
|
|
layout : 'default'
|
|
css : 'breadcrumb'
|
|
|
|
element : 'breadcrumb'
|
|
elementType : 'collection'
|
|
|
|
title : 'Breadcrumb'
|
|
description : 'A breadcrumb is used to display the relation of the current content to other content.'
|
|
type : 'UI Collection'
|
|
|
|
themes : ['Default']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/breadcrumb.less" />
|
|
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Breadcrumb</h4>
|
|
<p>A standard breadcrumb</p>
|
|
<div class="ui breadcrumb">
|
|
<a class="section">Home</a>
|
|
<div class="divider"> / </div>
|
|
<a class="section">Store</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">T-Shirt</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Elements</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">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">Home</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<a class="section">Registration</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<div class="active section">Personal Information</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">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">Home</a>
|
|
<div class="divider"> / </div>
|
|
<div class="active section">Search</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">Home</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<a class="section">Registration</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<div class="active section">Personal Information</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui large breadcrumb">
|
|
<a class="section">Home</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<a class="section">Registration</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<div class="active section">Personal Information</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui huge breadcrumb">
|
|
<a class="section">Home</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<a class="section">Registration</a>
|
|
<i class="right chevron icon divider"></i>
|
|
<div class="active section">Personal Information</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|