Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Navigation Menus

Tornado v2 Provides A Bunch Of Responsive Menu’s With Muliple Themes Horizontally and vertically With Easy To Customize With Sass.

Navigation Initialize

Tornado has Typescript Method to Activate responsive navigation menu functionality you can call out the method like this Tornado.menus.navigation(selector); and the selector must represent the navigation menu list wraper class name.

//=====> Import Menus Methods <=====//
import Menus from './Base/Menus';

//====> Typescript Usage <====//
Menus.navigation('.navigation-menu');

//====> Global Usage <====//
Tornado.menus.navigation('.navigation-menu');

Navigation Markup

Tornado provide a predesigned navigation menu component to create responsive nav menu in a simple way you can see the code below to build one and it contains container with class navigation-menu and data-id attribute for identify the menu and inside of it your menu list after thats comes the toggle menu button to show/hide in mobile devices witch most have class name .menu-btn with data-id attribute to identify the menu to open.

<!-- Main Menu -->
<div class="navigation-menu" data-id="main-menu">
    <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">About US</a></li>
        <li><a href="#">Download</a>
            <!-- Dropdown List -->
            <ul>
                <li><a href="#">Production Version</a></li>
                <li><a href="#">Development Version</a></li>
                <li><a href="quick-start.html">Quick Start CDN</a></li>
            </ul>
            <!-- // Dropdown List -->
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

<!-- Menu Toggle Mobile Button -->
<a href="#" class="menu-btn ti-menu-round" data-id="main-menu"></a>

Colored Navigation

tornado navigation menu can be colored with 3x colors default, primary, dark you can use them simply by adding the color class name to the navigation-menu wraper element.

<!-- Primary Colored Main Menu -->
<div class="navigation-menu primary" data-id="menu-1">
    <ul>
        <li><a href="#">Menu Theme</a></li>
        ...
    </ul>
</div>

<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn icon-btn ti-menu-round" data-id="menu-1"></a>

Navigation SASS Mixin

you can customize the navigation menu by targeting the menu .navigation-menu { ..mixin.. } and use the SASS mixin inside of it @include custom-navigation ( options ); see the example below.

@include navigation-custom-theme (
    $height:3.375rem,             //==> Height
    $font-size:0.9375rem,         //==> Font-size
    $font-weight:$medium-weight,  //==> Font Weight
    $item-gutter : 0.9375rem,     //==> Space Between Items
    $color:$gray-color,           //==> Text Color
    $hvr-color:$primary-color,    //==> Hover Color
    $hvr-bg:transparent,          //==> Hover Background
    //===> Sub Menu <===//
    $sub-color:$black-color,       //==> Submenu Color
    $sub-bg:$reverse-color,        //==> Submenu Background
    $sub-font-size:0.875rem,       //==> Submenu Font-size
    $sub-height:2.5rem,            //==> Submenu Height
    $sub-hvr-bg:$primary-color,    //==> Submenu Hover Background
    $sub-hvr-color:$reverse-color  //==> Submenu Hover Color
);

Mobile Theme SASS Mixin

you can customize the mobile menu theme by targeting the menu id from the data-id attribute #menu_id { ..mixin.. } and use the SASS mixin inside of it @include mobile-menu ( options ); see the example below.

@include mobile-menu (
    $menu-width : 280px, //====> Menu Width
    $menu-background : $reverse-color, //====> Menu Background
    $item-padding : 1.25rem, //====> Menu Item Padding
    $item-height : 2.875rem, //====> Item Height
    $item-font-size : 1rem, //===> Item Font Size
    $item-active-bg : $primary-color, //====> Activated Item Background
    $item-active-color : $reverse-color, //===> Activated Item Color
    $sub-height : 2.875rem, //====> Sub Item Height
    $sub-font-size : 0.9rem, //====> Sub Item Font Size
    $sub-bg : #f1f1f1, //===> Sub Item Background
    $sub-color : $dark-color, //===> Sub Item Color
    $divider-color : rgba(0, 0, 0, .10), //====> Menu Item Border Color
    $icon-size : 1.25rem, //====> Menu Item Icons Font Size
    $menu-direction: $direction, //====> Menu Direction Position [left,right]
);

Nested Menu Initialize

Tornado has Typescript Method to Activate vertical nested menu functionality you can call out the method like this Tornado.menus.nestedList (selector); and the selector must represent the menu list wraper class name.

//=====> Import Menus Methods <=====//
import Menus from './Base/Menus';

//====> Typescript Usage <====//
Menus.nestedList('.nested-menu');

//====> Global Usage <====//
Tornado.menus.nestedList('.nested-menu');

Nested Menu Markup

tornado provide another menu component in shape of nested lists inside each other and you can create one simply by creating a container called .nested-menu and inside of put your list see the code below, and it can be colored with adding classes primary, dark, gray to .nested-menu container.

<div class="nested-menu">
    <h2 class="title">Standard Menu Theme</h2>
    <ul>
        <li><a href="#">WebDesign</a></li>
        <li><a href="#">Web Front End Dropdown</a>
            <ul>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">FE Tips & Tricks</a></li>
                <li><a href="#">Front Sub Category</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">FE Tips & Tricks</a></li>
            </ul>
        </li>
        <li><a href="#">PHP Programing</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">jQuery Tuturials</a></li>
        <li><a href="#">UI/UX Inspiration</a></li>
    </ul>
</div>

Nested Menu Sass Mixin

you can customize the nested menu theme by targeting the menu .nested-menu { ..mixin.. } and use the SASS mixin inside of it @include nested-menu ( options ); see the example below.

.nested-menu {
    @include nested-menu (
        $height:35px,             // Height
        $font-size:15px,         // Font-size
        $font-weight:400,       // Font Weight
        $color:#1c1c1c,        // Text Color
        $hvr-color:#4166d6,   // Hover Color
        $hvr-bg:transparent, // Hover Background
        $space-size:25px,   // Gutter Size
        // submenu
        $sub-color:#1c1c1c,         // Submenu Color
        $sub-bg:rgba(0,0,0,0.05),  // Submenu Background
        $sub-font-size:14px,      // Submenu Font-size
        $sub-height:30px,        // Submenu Height
        $sub-hvr-bg:rgba(0,0,0,0.05),   // Submenu Hover Background
        $sub-hvr-color:$black-color    // Submenu Hover Color
    );
}

Utlities Classes

Class Name Description
primary goes to the menu wrapper div
dark goes to the menu wrapper div
gray goes to the menu wrapper div
collapsed menu wraper to hide and menu button to show

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.