---
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">

  <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">Breadcrumb</h4>
    <p>A standard breadcrumb</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">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 chevron icon divider"></i>
      <a class="section">Fruit</a>
      <i class="right chevron 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>