Appearance

Breadcrumbs ​

Click to preview the Breadcrumbs demo. View demo

Style 01 ​

Code:

html
<ul class="breadcrumb border-default bg-default">
  <li><a href="#" title="Home"><span class="fa fa-home"></span> Home</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

<ul class="breadcrumb border-default bg-accent">
  <li><a href="#" title="Home"><span class="fa fa-home"></span> Home</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 02 ​

Code:

html
<ul class="breadcrumb">
  <li><a href="#" title="Home"><span class="fa fa-home"></span> Home</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 03 ​

Code:

html
<ul class="breadcrumb">
  <li> 
    <span class="dropdown">
      <i class="fa fa-home"></i> 
      <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Home <span class="fa fa-angle-down"></span>
    </span>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
    </span>
  </li>
  <li>
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Features <span class="fa fa-angle-down"></span>
  </span>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
    </span>
  </li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 04 ​

Code:

html
<ul class="breadcrumb">
  <li><a href="#" title=""><span class="fa fa-home"></span> Home</a></li >
  <li><a href="#" title=""><span class="fa fa-cog"></span> Features</a></li>
  <li class="active"><span class="fa fa-map-marker"></span> Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 05 ​

Code:

html
<ul class="breadcrumb style-arrow">
  <li><a href="#" title=""><span class="fa fa-home"></span></a></li >
  <li><a href="#" title="">Skin Layout</a></li >
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 06 ​

Code:

html
<ul class="breadcrumb style-square">
  <li><a href="#" title=""><span class="fa fa-home"></span></a></li >
  <li><a href="#" title="">Skin Layout</a></li >
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
  <li class="right"> 
  <a href="#" title="Chats"><span class="fa fa-envelope-o"></span> Chats </a>     
  <span class="dropdown"> 
    <span type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog"></i> Settings <i class="fa fa-angle-down"></i>
    </span>
    <ul class="dropdown-menu bottom-right" role="menu">
      <li><a href="#" title="Action">Action</a></li>
      <li><a href="#" title="Another action">Another action</a></li>
      <li><a href="#" title="Something else here">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#" title="Separated link">Separated link</a></li>
    </ul>
  </span> 
  </li>
</ul>

Style 07 ​

Code:

html
<ul class="breadcrumb border-default bg-default text-center">
  <li><a href="#" title="Home"><span class="fa fa-home"></span> Home</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
</ul>

Style 08 ​

Code:

html
<ul class="breadcrumb text-center">
  <li><a href="#" title="Home"><span class="fa fa-home"></span> Home</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
</ul>

Style 09 ​

Code:

html
<ul class="breadcrumb style-square text-center">
  <li><a href="#" title=""><span class="fa fa-home"></span></a></li>
  <li><a href="#" title="">Skin Layout</a></li>
  <li><a href="#" title="Features">Features</a></li>
  <li class="active">Breadcrumbs</li>
</ul>