Breadcrumb's

The Framework Provides Multiple Stylish Breadcrumb Navbars Predesigned and Ready To Use.

Sass Customize

in order to edit the Breadcrumb's you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_breadcrumbs.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Standard Breadcrumb

a Standard Breadcrumb Navigation Without Boxing Theme Just a Simple UI to be Easy override and Easier To Customize With Sass


<!-- Breadcrumb -->
<div class="breadcrumb tx-uppercase">
    <a href="#" class="ti-home">Home Page</a>
    <a href="#">Site Category</a>
    <a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->

Class Name	Element	Description
breadcrumb	breadcrumb wrapper	The Main Class For The Breadcrumb Component.
primary	breadcrumb wrapper	Coloring Breadcrumb with The Primary Theme Color.
dark	breadcrumb wrapper	Coloring Breadcrumb with The Dark Theme Color.

Pointing Breadcrumb Theme


<!-- Breadcrumb -->
<div class="breadcrumb pointing tx-uppercase">
    <a href="#"><span class="ti-home">Home Page</span></a>
    <a href="#">Site Category</a>
    <a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->

Class Name	Element	Description
pointing	breadcrumb wrapper	The Pointing Theme For The Breadcrumb Component.
primary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
secondary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
dark	breadcrumb wrapper	Coloring Breadcrumb Base with The Dark Theme Color.

Curving Breadcrumb Theme


<!-- Breadcrumb -->
<div class="breadcrumb curving tx-uppercase">
    <a href="#" class="ti-home">Home Page</a>
    <a href="#">Site Category</a>
    <a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->

Class Name	Element	Description
curving	breadcrumb wrapper	The Curving Theme For The Breadcrumb Component.
primary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
secondary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
dark	breadcrumb wrapper	Coloring Breadcrumb Base with The Dark Theme Color.

Skewed Breadcrumb Theme


<!-- Breadcrumb -->
<div class="breadcrumb skewed tx-uppercase">
    <a href="#" class="ti-home">Home Page</a>
    <a href="#">Site Category</a>
    <a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->

Class Name	Element	Description
skewed	breadcrumb wrapper	The Skewed Theme For The Breadcrumb Component.
primary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
secondary	breadcrumb wrapper	Coloring Breadcrumb Active items with The Primary Theme Color.
dark	breadcrumb wrapper	Coloring Breadcrumb Base with The Dark Theme Color.

Dotted Breadcrumb Theme


<!-- Breadcrumb -->
<div class="breadcrumb dotted tx-uppercase">
    <a href="#" class="ti-home">Home Page</a>
    <a href="#">Site Category</a>
    <a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->

Class Name	Element	Description
dotted	breadcrumb wrapper	The Dotted Theme For The Breadcrumb Component.

Next Media Objects Previous Navbar/Header