Dialog Start tour

Breadcrumbs

This theme has breadcrumbs that you can use for any kind of navigation. Our breadcrumbs come in 2 types, basic and big, and they are pure CSS so no images are used(excluded the main breadcrumbs located in the header).

Basic

Easy to use pure css breadcrumbs navigation.

How to use

How to use HTML elements.

Markup
<nav class="basic-breadcrumbs">
    <ul>
        <li class="bc-tab-first">
            <a href="javascript:void(0);">
                Home
                <span class="bc-arrow-right"></span>
            </a>
        </li>   
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                Settngs
                <span class="bc-arrow-right"></span>
            </a>                
        </li>    
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                Articles
                <span class="bc-arrow-right"></span>
            </a>                
        </li> 
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                Media
                <span class="bc-arrow-right"></span>
            </a>                
        </li>                                   
        <li class="bc-tab-last bc-nolink bc-active">
            <span class="bc-arrow-left"></span>
            Page
            <span class="bc-arrow-right"></span>       
        </li>  
    </ul>          
</nav>

Start at

Skip a couple of steps.

How to use

How to use HTML elements.

Markup
<nav class="basic-breadcrumbs">
    <ul>
        <li class="bc-tab-first bc-nolink bc-active">
            1. First
            <span class="bc-arrow-right"></span>
        </li>   
        <li class="bc-tab bc-nolink bc-active">
            <span class="bc-arrow-left"></span>
            2. Second
            <span class="bc-arrow-right"></span>            
        </li>    
        <li class="bc-tab bc-nolink bc-active">
            <span class="bc-arrow-left"></span>
            3. Third
            <span class="bc-arrow-right"></span>             
        </li>                          
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                4. Fourth
                <span class="bc-arrow-right"></span>
            </a>                
        </li>
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                5. Fifth
                <span class="bc-arrow-right"></span>
            </a>                
        </li>                                              
    </ul>          
</nav>

Icons only

Easy to use pure css breadcrumbs navigation.

How to use

How to use HTML elements.

Markup
<nav class="basic-breadcrumbs">
     <ul>
        <li class="bc-tab-first">
            <a href="javascript:void(0);">
                <span class="home-16 plix-16"></span>
                <span class="bc-arrow-right"></span>
            </a>    
        </li>   
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                <span class="mail-16 plix-16"></span>
                <span class="bc-arrow-right"></span>
            </a>            
        </li>    
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                <span class="note-16 plix-16"></span>
                <span class="bc-arrow-right"></span> 
            </a>            
        </li>                          
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                <span class="vcard-16 plix-16"></span>
                <span class="bc-arrow-right"></span>
            </a>                
        </li>
        <li class="bc-tab-last bc-nolink bc-active">
            <span class="bc-arrow-left"></span>
            <span class="controls-16 plix-16"></span>
            <span class="bc-arrow-right"></span>               
        </li>                                              
    </ul>          
</nav>

Big breadcrumbs

You can use big breadcrumbs with a title and a short description.

How to use

How to use HTML elements.

Markup
<nav class="big-breadcrumbs">
    <ul>
        <li class="bc-tab-first">
            <a href="javascript:void(0);">
            	<span class="bc-number">1</span>
                <span class="bc-title">Step One</span>
                <span class="bc-decs">Begin with this step</span>
                <span class="bc-arrow-right"></span>
            </a>    
        </li>   
        <li class="bc-tab">
            <a href="javascript:void(0);">
                <span class="bc-arrow-left"></span>
                <span class="bc-number">2</span>
                <span class="bc-title">Step Two</span>
                <span class="bc-decs">Dont stop, go on</span>
                <span class="bc-arrow-right"></span>
            </a>            
        </li>                             
        <li class="bc-tab-last bc-nolink bc-active">
            <span class="bc-arrow-left"></span>
            <span class="bc-number">3</span>
            <span class="bc-title">The finish</span>
            <span class="bc-decs">Yes, this is the end</span>
            <span class="bc-arrow-right"></span>               
        </li>                                              
    </ul>          
</nav>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
basic-breadcrumbs nav | div Main breadcrumbs class 1.0
bc-tab-first li First tab class. Always start with this class. 1.0
bc-tab li Main tab class. 1.0
bc-tab-last li Last tab class. Always end with this class. 1.0
bc-nolink li If a tab doesn't contains a link, use this class. 1.0
bc-active li Use this as an indicator class, this class has a different color. 1.0
bc-arrow-left span CSS arrow pointing to the left. 1.0
bc-arrow-right span CSS arrow pointing to the right. 1.0
big-breadcrumbs nav | div Main class for the big breadcrumbs. 1.0
bc-title span Big breadcrumbs title. 1.0
bc-desc span Big breadcrumbs description. 1.0
plix-16 span 16px custom pixel icons size class. 1.0
home-16 span Icon class. All icons 1.0