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