Documentation

Introduction

Using this documentation guide you can build your navigation "step by step". Please read this carefully to avoid misleads and errors and feel free to contact us in case of bugs or problems with the installation.

In the "Files" folder you will find all the necessary files for the installation and customization:


Files/
├── css/
│   ├── navigation.css
│   └── skins/
├── js/
│   └── navigation.js
└── scss/
    ├── navigation.scss
    └── navigation/

Folder	Content
css	All CSS files are in this folder, including the skins files
js	Contains the Javascript file
scss	All SASS files are in this folder

Installation

Copy-paste the stylesheet link into your <head> section:

Copy

<link href="css/navigation.css" rel="stylesheet">

Place the following <script> into your <head> section or right before the closing </body> tag:

Copy

<script type="text/javascript" src="js/navigation.js"></script>

Then initialize the navigation:

Copy

var navigation = new Navigation(document.getElementById("navigation"));

Example:

Copy

<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

The main classes:

Element classes	Description
`.navigation`	The navigation wrapper
`.navigation-header`	The visible header on portrait view
`.navigation-brand-text`	Your brand's text
`.navigation-button-toggler`	A button to show or hide the offcanvas panel
`.navigation-body`	The wrapper for the menu links and other contents. This is visible content on the landscape view and offcanvas panel
`.navigation-body-header`	The navigation body's header. Typically wraps a brand text or logo and the close button (offcanvas)
`.navigation-menu`	A list of menu links

The class .is-active on .navigation-item indicates the active item.

Menus

Alignments

The navigation allows several alignments.

Default:

Copy

<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Justified:

Copy

<nav id="navigation" class="navigation navigation-justified">
    ...
</nav>

Centered:

Copy

<nav id="navigation" class="navigation navigation-centered">
    ...
</nav>

Multiple menus

The navigation allows the use of multiple menu lists. Just put the menus inside the navigation body and choose a alignment:

Example with two menus:

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
        </ul>
        <ul class="navigation-menu">
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Login</a>
            </li>
        </ul>
    </div>
</nav>

Menu with icons

It is possible to use icons on menu items. The navigation is compatible with Ionicons and Font Awesome. Add your desired icon inside link before the text:

"Ionicons" example:

Copy

<ul class="navigation-menu">
    <li class="navigation-item is-active">
        <a class="navigation-link" href="#">
        <i class="ion-md-home"></i>
        <span>Home</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="ion-md-cog"></i>
        <span>Services</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="ion-md-mic"></i>
        <span>Blog</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="ion-md-mail"></i>
        <span>Contact</span>
        </a>
    </li>
</ul>

"Font Awesome" example:

Copy

<ul class="navigation-menu">
    <li class="navigation-item is-active">
        <a class="navigation-link" href="#">
        <i class="fas fa-home"></i>
        <span>Home</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="fas fa-cog"></i>
        <span>Services</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="fas fa-comments"></i>
        <span>Blog</span>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
        <i class="fas fa-envelope"></i>
        <span>Contact</span>
        </a>
    </li>
</ul>

Social links

You can use a menu with items as icons to represent your social links. Just use the class .navigation-social-menu on a menu links with icons:

Copy

<ul class="navigation-menu navigation-social-menu">
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-facebook-f"></i>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-twitter"></i>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-instagram"></i>
        </a>
    </li>
</ul>

Icon items

You can use menu items as a pure icons. It is similar to a "menu with icons", but you need to use the extra class named .navigation-icon-item on menu item and a <span> element to wrap the text:

Copy

<ul class="navigation-menu">
    <li class="navigation-item is-active navigation-icon-item">
        <a class="navigation-link" href="#">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
    </li>
    <li class="navigation-item navigation-icon-item">
        <a class="navigation-link" href="#">
            <i class="fas fa-sliders-h"></i>
            <span>Settings</span>
        </a>
    </li>
    <li class="navigation-item navigation-icon-item">
        <a class="navigation-link" href="#">
            <i class="fas fa-comment"></i>
            <span>Messages</span>
        </a>
    </li>
    <li class="navigation-item navigation-icon-item">
        <a class="navigation-link" href="#">
            <i class="fas fa-power-off"></i>
            <span>Logout</span>
        </a>
    </li>
</ul>

Brand text

You can use a .navigation-brand-text inside the navigation header (or navigation body header):

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">

        <!-- Brand text -->
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">

            <!-- Brand text -->
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Logotype

You can use a .navigation-logo inside the navigation header (or navigation body header).

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">

        <!-- Logo -->
        <div class="navigation-logo">
            <a href="#">
            <img src="img/logo.png" alt="logo">
            </a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">

            <!-- Logo -->
            <div class="navigation-logo">
                <a href="#">
                <img src="img/logo.png" alt="logo">
                </a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Elements

Are available some preset elements to be used with the navigation.

Text element

The text must be wrapped in a .navigation-body-section:

<div class="navigation-body">
    ...
    <div class="navigation-body-section">
        <span class="navigation-text">Inline text</span>
    </div>
    ...
</div>

Button

The button must be wrapped in a .navigation-body-section:

<div class="navigation-body">
    ...
    <div class="navigation-body-section">
        <a class="navigation-btn" href="#">Button</a>
    </div>
    ...
</div>

Search form

The search form must be wrapped in a .navigation-body-section:

<div class="navigation-body">
    ...
    <div class="navigation-body-section">
        <form class="navigation-inline-form">
            <input class="navigation-input" type="search" name="search" placeholder="Search">
            <button type="submit" class="navigation-btn">
            <i class="navigation-search-icon"></i>
            </button>
        </form>
    </div>
    ...
</div>

Badge

The badge element must be inserted into a .navigation-link:

Copy

<li class="navigation-item">
    <a class="navigation-link" href="#">
        Messages
        <span class="navigation-badge">5</span>
    </a>
</li>

You can mix all the elements as you want:

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">
                Messages
                <span class="navigation-badge">5</span>
                </a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Settings</a>
            </li>
        </ul>
        <div class="navigation-body-section">
            <a class="navigation-btn" href="#">Button</a>
        </div>
        <div class="navigation-body-section">
            <form class="navigation-inline-form">
                <input class="navigation-input" type="search" name="search" placeholder="Search">
                <button type="submit" class="navigation-btn">
                <i class="navigation-search-icon"></i>
                </button>
            </form>
        </div>
    </div>
</nav>

Dropdowns

You can use lists inside your menu items as dropdowns lists:

Copy

<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
                <ul class="navigation-dropdown">
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                </ul>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

To add two or more dropdowns, put the dropdown lists inside another lists:

Copy

<ul class="navigation-dropdown">
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
        <ul class="navigation-dropdown">
            <li class="navigation-dropdown-item">
                <a class="navigation-dropdown-link" href="#">Dropdown item</a>
            </li>
            <li class="navigation-dropdown-item">
                <a class="navigation-dropdown-link" href="#">Dropdown item</a>
            </li>
            <li class="navigation-dropdown-item">
                <a class="navigation-dropdown-link" href="#">Dropdown item</a>
            </li>
            <li class="navigation-dropdown-item">
                <a class="navigation-dropdown-link" href="#">Dropdown item</a>
            </li>
        </ul>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
</ul>

Left alignment

Use the class .navigation-dropdown-left on a dropdown to give a RTL orientation to it:

Copy

<ul class="navigation-dropdown navigation-dropdown-left">
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
</ul>

Horizontal orientation

Just use the class .navigation-dropdown-horizontal on your dropdowns:

Copy

<ul class="navigation-dropdown navigation-dropdown-horizontal">
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
    <li class="navigation-dropdown-item">
        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
    </li>
</ul>

You CAN'T put a vertical dropdown as a parent of a horizontal dropdown and vice versa.

Megamenu

You can use megamenus to put all the content you want. Just add a .navigation-megamenu into a menu item.

Home
Megamenu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus a ante quis ultricies. Nunc a nibh sit amet risus aliquet mattis dapibus nec ante. Mauris porta faucibus dictum. Morbi ut purus vitae lectus porttitor ornare eu laoreet erat. Pellentesque at elit id ipsum gravida porttitor ut ut nulla.
Blog
Contact

Copy

<ul class="navigation-menu">
    <li class="navigation-item is-active">
        <a class="navigation-link" href="#">Home</a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">Services</a>
        <div class="navigation-megamenu">
            <div class="navigation-megamenu-container">
                ...
            </div>
        </div>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">Blog</a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">Contact</a>
    </li>
</ul>

Megamenu sizes

With the classes .navigation-megamenu-half and .navigation-megamenu-quarter you can give different sizes to the megamenu:

Home
Megamenu Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus a ante quis ultricies. Nunc a nibh sit amet risus aliquet mattis dapibus nec ante. Mauris porta faucibus dictum. Morbi ut purus vitae lectus porttitor ornare eu laoreet erat. Pellentesque at elit id ipsum gravida porttitor ut ut nulla.
Megamenu Quarter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus a ante quis ultricies. Nunc a nibh sit amet risus aliquet mattis dapibus nec ante. Mauris porta faucibus dictum. Morbi ut purus vitae lectus porttitor ornare eu laoreet erat. Pellentesque at elit id ipsum gravida porttitor ut ut nulla.
Blog
Contact

Copy

<li class="navigation-item">
    <a class="navigation-link" href="#">Megamenu Half</a>
    <div class="navigation-megamenu navigation-megamenu-half">
        <div class="navigation-megamenu-container">
            ...
        </div>
    </div>
</li>

<li class="navigation-item">
    <a class="navigation-link" href="#">Megamenu Quarter</a>
    <div class="navigation-megamenu navigation-megamenu-quarter">
        <div class="navigation-megamenu-container">
            ...
        </div>
    </div>
</li>

Megamenu grid

A basic grid system is available. You can use the elements .navigation-row for rows and .navigation-col and .navigation-col-* for columns. Use as many rows and columns as you want:

Copy

<!-- One row with one columns -->
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>

<!-- One row with three columns -->
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>

<!-- Various rows and columns -->
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col-2">...</div>
            <div class="navigation-col-3">...</div>
            <div class="navigation-col-4">...</div>
            <div class="navigation-col-2">...</div>
            <div class="navigation-col-1">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col-9">...</div>
            <div class="navigation-col-3">...</div>
        </div>
    </div>
</div>

For more flexibility, you can use any other grid system like Bootstrap grid system, for example.

Megamenu tabs

An extra component to help you organizing the content. All you need is a menu item with a megamenu panel to put the tabs element, then place your content into the tabs element:

Home
Megamenu tabs
- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae volutpat ante, nec scelerisque purus. Sed massa libero, porttitor eu nunc nec, finibus congue sapien. Proin maximus congue tortor quis egestas. Nunc vitae turpis ut dolor elementum sodales vitae euismod tortor. Sed cursus mattis eleifend. Pellentesque lobortis auctor ante, iaculis interdum nibh bibendum quis.
Blog
Contact

Copy

<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-tabs">
            <ul class="navigation-tabs-nav">
                <li class="navigation-tabs-nav-item is-active"><a href="#">Tab 1</a></li>
                <li class="navigation-tabs-nav-item"><a href="#">Tab 2</a></li>
                <li class="navigation-tabs-nav-item"><a href="#">Tab 3</a></li>
                <li class="navigation-tabs-nav-item"><a href="#">Tab 4</a></li>
            </ul>
            <div class="navigation-tabs-pane is-active">
               
            </div>
            <div class="navigation-tabs-pane">
                
            </div>
            <div class="navigation-tabs-pane">
                
            </div>
            <div class="navigation-tabs-pane">
               
            </div>
        </div>
    </div>
</div>

Megamenu lists

Are you need lists on the navigation? There are preset lists configured to work inside the megamenus.

Copy

<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">
                <ul class="navigation-list">
                    <li class="navigation-list-heading"><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Consequat<span class="navigation-badge">80</span></a></li>
                    <li><a href="#">Cras velit </a></li>
                    <li><a href="#">Aenean tempus</a></li>
                </ul>
            </div>
            <div class="navigation-col">
                <ul class="navigation-list">
                    <li class="navigation-list-heading"><a href="#">Aliquam luctus</a></li>
                    <li><a href="#">Aliquam luctus</a></li>
                    <li><a href="#">Donec quis</a></li>
                    <li><a href="#">Maecenas</a></li>
                    <li><a href="#">Quisque</a></li>
                </ul>
            </div>
            <div class="navigation-col">
                <ul class="navigation-list">
                    <li class="navigation-list-heading"><a href="#">Donec vestibulum</a></li>
                    <li><a href="#">Vestibulum</a></li>
                    <li><a href="#">Collicitudin</a></li>
                    <li><a href="#">Mauris<span class="navigation-badge">7</span></a></li>
                    <li><a href="#">Curabitur</a></li>
                </ul>
            </div>
            <div class="navigation-col">
                <ul class="navigation-list">
                    <li class="navigation-list-heading"><a href="#">Fusce malesuada</a></li>
                    <li><a href="#">Malesuada</a></li>
                    <li><a href="#">Fusce a mattis</a></li>
                    <li><a href="#">Donec pretium</a></li>
                    <li><a href="#">Nunc molestie</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Using the grid system you can add as many lists as you want.

Plugin options

In the table below you can see all the available options:

Option	Default value	Type	Description
breakpoint	992	number	Determines the minimum value of the screen width for the navigation changes its events from the portrait mode to landscape mode. A screen width minor than breakpoint value → portrait mode (mobile phones, tablets...). A screen width greater or equal than breakpoint value → landscape mode (desktops, laptops...).
submenuTrigger	"hover"	string	The event that starts showing or hiding a dropdown or megamenu. You can use hover or click
overlay	true	boolean	Shows an overlay panel when the offcanvas is visible
overlayColor	"rgba(0, 0, 0, 0.7)"	string	The color of the overlay. You can use HEX, RGB and RGBA colors
autoSubmenuIndicator	true	boolean	Determines if arrows that indicates a dropdown or megamenu are inserted automatically
submenuIndicatorTrigger	false	boolean	Indicates if the dropdowns or megamenus will be open using the indicators (mobile)
hideSubWhenClickOut	true	boolean	If true, dropdowns and megamenus will be hidden when you click or touch outside the navigation
scrollMomentum	true	boolean	Determines if the offcanvas panel supports a "momentum" style scrolling. Setting it to false can avoid problems with the scroll event in certain scenarios.
scrollSpy	false	boolean	If true, the navigation acquire the "scrollspy" functionality according to links references and document sections. See the chapter "Scrollspy navigation" for more details.
scrollSpySpeed	1000	number	The scrolling speed (ms) when the option "scrollSpy" is configured to true
scrollSpyOffset	0	number	Pixels to offset between navigation and section top when calculating position of scroll.
landscapeClass	"navigation-landscape"	string	The CSS class to be applied on the navigation in landscape mode
onInit	{}	custom code	Executes your custom code when the navigation is initialized
onLandscape	{}	custom code	Executes your custom code when the navigation goes to landscape mode
onShowOffCanvas	{}	custom code	Executes your custom code when the offcanvas panel is visible
onHideOffCanvas	{}	custom code	Executes your custom code when the offcanvas panel is hidden

Examples

Using "click" event:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    submenuTrigger: "click"
});

Changing the overlay panel color to hexadecimal blue:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    overlayColor: "#31A6FF"
});

Changing the breakpoint value, removing the overlay panel and defining a custom code on initialization:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    breakpoint: 1024,
    overlay: false,
    onInit: function(){
        alert("Initialized");
    }
});

Methods

See the available methods to interact with the navigation:

toggleOffcanvas

Show or hide the offcanvas panel.

Copy

// Initializing the navigation
var navigation = new Navigation(document.getElementById("navigation"));

// Showing the offcanvas panel with a click on a button
document.getElementById("btn-show").addEventListener("click", navigation.toggleOffcanvas);

Fixed navigation

To use a fixed navigation you must simply add the .fixed-top class:

Copy

<nav id="navigation" class="navigation fixed-top">
    ...
</nav>

See the "Tutorials" for more details about the implementation of a fixed navigation.

Sticky navigation

To use a sticky navigation you must simply add the .sticky-top class:

Copy

<nav id="navigation" class="navigation sticky-top">
    ...
</nav>

See the "Tutorials" for more details about the implementation of a sticky navigation.

Scrollspy

Automatically update navigation active items by clicking on links or scrolling the page.

Some javascript setup:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    scrollSpy: true,
    scrollSpySpeed: 600,
    scrollSpyOffset: 10
});

The navigation menu with links pointing to the sections ID's:

Copy

<ul class="navigation-menu">
    <li class="navigation-item is-active">
        <a class="navigation-link" href="#home">Home</a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#services">Services</a>
    </li>
</ul>

The sections with their ID's:

Copy

<section id="home">
    ....
</section>

<section id="services">
    ....
</section>

See the "Tutorials" for more details about the implementation of a scrollspy navigation.

Skins

This is the list of available skins:

Name	File
border-top	navigation-skin-border-top.css
border-bottom	navigation-skin-border-bottom.css
border-top-bottom	navigation-skin-border-top-bottom.css
boxed	navigation-skin-boxed.css
ounded-boxed	navigation-skin-rounded-boxed.css
colored	navigation-skin-colored.css
gradient	navigation-skin-gradient.css
mini-circle	navigation-skin-mini-circle.css
bottom-arrow	navigation-skin-bottom-arrow.css
dark	navigation-skin-dark.css

See this guide to know in detail how to use a skin.

SASS

SASS files can be found in "Files/scss". See this guide to learn how to change SASS files to create new CSS files.

Utilities

We've prepared a few classes to help set up navigation in the best possible way.

Items alignment

You can align one or more items in the navigation using the classes .align-to-right or .align-to-left. This may be useful when you want to isolate an item.

Below you can see the brand text and menu in the left and a right-aligned button:

Copy

<div class="navigation-body-section align-to-right">
    <a class="navigation-btn" href="#">Button</a>
</div>

Left-aligned brand text and the search form and menu in the right side:

Copy

<div class="navigation-body-header align-to-left">
    <div class="navigation-brand-text">
        <a href="#">NAVIGATION</a>
    </div>
    <span class="navigation-body-close-button">&#10005;</span>
</div>

Margin on top (offcanvas panel)

Sometimes you might need some extra spacing between navigation elements on offcanvas panel. In this case you can use the class .margin-top. It gives 1rem of spacing on top of an element. The example below shows the use fo this class on social icons menu (see it on portrait view):

Copy

<ul class="navigation-menu navigation-social-menu margin-top">
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-facebook-f"></i>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-twitter"></i>
        </a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#">
            <i class="fab fa-instagram"></i>
        </a>
    </li>
</ul>

Display

Use the classes .hide-on-portrait and .hide-on-landscape to hide some elements depending on the screen width:

Class	Description
`.hide-on-portrait`	Hides an element on portrait view and shows it on landscape view
`.hide-on-landscape`	Hides an element on landscape view and shows it on portrait view

Additional info

Browser compatibility	IOS9+, Android, Chrome, Firefox, Edge, Opera, IE10+ (Due to incompatibilities, some features may not work in IE10).
Framework compatibility	Bootstrap, Foundation, Framy, Materialize, Metro UI, Milligram, Semantic UI, Spectre, UIkit and others.
Real links on parent items	We do not recommend the use of real links on items that have dropdowns or megamenu panels. If you want this, in landscape mode the submenus will appear after the second click/tap.