Breadcrumbs

Breadcrumbs are a type of secondary navigation scheme that reveal the user's location in a website or application

Default

Centered

Justified

Right

<div>
  <h4>Default</h4>
  <Breadcrumbs>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>

  <h4>Centered</h4>
  <Breadcrumbs center>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>

  <h4>Justified</h4>
  <Breadcrumbs justified>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>

  <h4>Right</h4>
  <Breadcrumbs right>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>
</div>

<div>
  <h4>Default</h4>
  <Breadcrumbs>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>
  <h4>Centered</h4>
  <Breadcrumbs center>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>
  <h4>Justified</h4>
  <Breadcrumbs justified>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>
  <h4>Right</h4>
  <Breadcrumbs right>
    <Breadcrumbs.Item><a href="#">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Item><a href="#">Page Two</a></Breadcrumbs.Item>
    <Breadcrumbs.Item disabled><a href="#">Disabled</a></Breadcrumbs.Item>
    <Breadcrumbs.Item selected>Selected</Breadcrumbs.Item>    
  </Breadcrumbs>
</div>