Tornado UI | » Breadcrumb

Sass Customize

in order to edit the Breadcrumbs you can use the css classes to overide the theme or you can edit it with sass src/SCSS/elements/_breadcrumbs.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

<!-- 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 easly 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
);