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
Copy Code
<!-- 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
Copy Code
<!-- 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
Copy Code
<!-- 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
Copy Code
<!-- 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
Copy Code
<!-- 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.