SemanSemantic-UItic-UI/server/documents/collections/breadcrumb.html.eco

---
layout      : 'default'
css         : 'breadcrumb'

element     : 'breadcrumb'
elementType : 'collection'

title       : 'Breadcrumb'
description : 'A breadcrumb is used to show heirarchy between 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>