BREADCRUMB
The Framework Provides Multiple Stylish Breadcrumb Navbars Predesigned and Ready To Use.
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
<!-- 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
<!-- 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
<!-- 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
<!-- Breadcrumb -->
<div class="breadcrumb dotted tx-uppercase">
<a href="#">Home Page</a>
<a href="#">Site Category</a>
<a href="#">Theard or Current Page Name Goes Here</a>
</div>
<!-- // Breadcrumb -->
BREADCRUMB THEME MIXIN
tornado provide a nice control of mixin for the Breadcrumb theme witch you can use to extend or change the colors, sizes, backgrounds
easily with sass mixin you can use it by adding the function/mixin inside a selector targeting your header you can see the function and all options that available below.
//==== Breadcrumb Box ====//
@include breadcrumb (
$backgroundColor:#f7f7f7, //====> Background Color
$border:1px solid rgba(0,0,0,.10), //====> Box Border
$padding:0.6875rem 1.25rem, //=====> Box Padding
$color:$dark-color, //=====> Text Color
$fontSize:0.9375rem, //=====> Text Font Size
$lineHeight:1.875rem, //====> Text Line Height
$iconSize:1rem, //====> Icons Font Size
$colorActive:$dark-color, //=====> Active Text Color
$ActiveBackground:#ffffff, //====> Active Background Color
);