Preview

Classic
Transparent
Top logo
Icon
Icon top
Subtitle
Big box
Side
Side collapse
Top mini area

Usage

<nav class="menu-classic" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li class="dropdown">
                    <a href="#">Menu item</a>
                    <ul>
                        <li class="dropdown-submenu">
                            <a>Dropdown</a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li class="dropdown-submenu">
                                    <a href="#">Dropdown</a>
                                    <ul>
                                        <li><a href="#">Menu item</a></li>
                                        <li><a href="#">Menu item</a></li>
                                        <li><a href="#">Menu item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                    </ul>
                </li>
            </ul>
            <div class="menu-right">
                <!--SEARCH A-->
                <form role="search" method="get" id="searchform" class="search-bar">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <input type="submit" value="Go">
                </form>
                <!--SEARCH B-->
                <form role="search" method="get" id="searchform" class="search-btn">
                    <div class="search-box-menu">
                        <input type="text" placeholder="Search ...">
                        <i></i>
                    </div>
                </form>
                <!--SOCIAL ICONS-->
                <div class="icon-links icon-social social-colors-hover">
                    <a target="_blank" class="facebook" href="#"><i class="icon-facebook"></i></a>
                    <a target="_blank" class="twitter" href="#"><i class="icon-twitter"></i></a>
                    <a target="_blank" class="linkedin" href="#"><i class="icon-linkedin"></i></a>
                </div>
                <!--SHOP MENU-->
                <div class="shop-menu-cnt">
                    <i><span class="cart-count">0</span></i>
                    <div class="shop-menu">
                        <ul class="shop-cart">
                            <li class="cart-item">
                                <img src="image.jpg" alt="">
                                <div class="cart-content">
                                    <h5>Product 1</h5>
                                    <span class="cart-quantity">
                                        1 x $99.00
                                    </span>
                                </div>
                            </li>
                            <li class="cart-item">
                                <img src="image.jpg" alt="">
                                <div class="cart-content">
                                    <h5>Product 2</h5>
                                    <span class="cart-quantity">
                                        1 x $99.00
                                    </span>
                                </div>
                            </li>
                        </ul>
                        <p class="cart-total">
                            Subtotal: <span>$299.00</span>
                        </p>
                        <p class="cart-buttons">
                            <a href="#" class="cart-view">View Cart</a>
                            <a href="#" class="cart-checkout">Checkout</a>
                        </p>
                    </div>
                </div>
                <!--LAN MEMU-->
                <ul class="lan-menu">
                    <li class="dropdown">
                        <a href="#"><img src="image.jpg" />EN </a>
                        <ul>
                            <li><a href="#"><img src="image.jpg" />IT</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</nav> 

<nav class="menu-classic" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
            </ul>
            <div class="menu-right">

            </div>
            <div class="clear"></div>
        </div>
    </div>
</nav> 

<nav class="menu-top-logo" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
            </ul>
            <div class="menu-right">

            </div>
            <div class="clear"></div>
        </div>
    </div>
</nav>

<nav class="menu-icon" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#"><i class="im-paper-plane"></i>Menu item</a>
                </li>
                <li class="dropdown">
                    <a href="#"><i class="im-paper-plane"></i>Menu item</a>
                    <ul>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="im-paper-plane"></i>Menu item</a>
                </li>
            </ul>
            <div class="menu-right">

            </div>
            <div class="clear"></div>
        </div>
    </div>
</nav> 

<nav class="menu-subline">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li><a href="#">Menu item</a></li>
                <li><a href="#">Menu item</a></li>
                <li><a href="#">Menu item</a></li>
            </ul>
            <div class="menu-right">
               
            </div>
            <div class="clear"></div>
        </div>
        <div class="subline-bar">
            <div class="container">
                <ul></ul>
                <ul>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                </ul>
                <ul>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                </ul>
                <ul>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                    <li><a href="#">Menu item</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav> 

<nav class="menu-subtitle" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#">Menu item<span>Subtitle</span></a>
                </li>
                <li>
                    <a href="#">Menu item<span>Subtitle</span></a>
                </li>
                <li>
                    <a href="#">Menu item<span>Subtitle</span></a>
                </li>
            </ul>
            <div class="menu-right">

            </div>
            <div class="clear"></div>
        </div>
    </div>
</nav> 

<nav class="menu-bg-box" data-menu-anima="fade-in">
    <div class="container">
        <div class="menu-brand">
            <a href="#">
                <img class="logo-default" src="logo.png" alt="logo" />
                <img class="logo-retina" src="logo.png" alt="logo" />
            </a>
        </div>
        <i class="menu-btn"></i>
        <div class="menu-cnt">
            <ul>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
            </ul>
            <div class="menu-right">

            </div>
            <div class="clear"></div>
        </div>
        <div class="menu-box">
            <div class="row">
                <div class="col-lg-4">
                    <div class="icon-box icon-box-left">
                        <i class="im-phone"></i>
                        <div class="caption">
                            <h3 class="text-sm">1-700-(568-852)</h3>
                            <p class="text-xs">We're on call 24/7</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="icon-box icon-box-left">
                        <i class="im-clock"></i>
                        <div class="caption">
                            <h3 class="text-sm">Mon - Fri 08:00 - 20:00</h3>
                            <p class="text-xs">Operating Hours</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="icon-box icon-box-left">
                        <i class="im-envelope"></i>
                        <div class="caption">
                            <h3 class="text-sm">example@company.com</h3>
                            <p class="text-xs">Write to Us</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav> 

<nav class="menu-side">
    <div class="menu-brand">
        <a href="#">
            <img class="logo-default" src="logo.png" alt="logo" />
            <img class="logo-retina" src="logo.png" alt="logo" />
        </a>
    </div>
    <i class="menu-btn"></i>
    <div class="menu-cnt">
        <ul>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
        </ul>
    </div>
    <div class="bottom-area">
        <div class="lan-menu">
            <a href="#">
                <img src="image.jpg" />
            </a>
            <a href="#">
                <img src="image.jpg" />
            </a>
        </div>
        <div class="icon-links icon-social social-colors-hover align-center">
            <a target="_blank" class="facebook" href="#"><i class="icon-facebook"></i></a>
            <a target="_blank" class="twitter" href="#"><i class="icon-twitter"></i></a>
            <a target="_blank" class="linkedin" href="#"><i class="icon-linkedin"></i></a>
        </div>
        <p>© Copyright 2018. All rights reserved. </p>
    </div>
</nav> 

<nav class="menu-classic" data-menu-anima="fade-in">
    <div class="menu-mini scroll-hide">
        <div class="container">
            <ul>
                <li><i class="im-phone"></i> (02) 1234556789</li>
                <li><i class="im-envelope"></i> example@company.com</li>
            </ul>
            <div class="menu-right">
                <form role="search" method="get" id="searchform" class="search-bar">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <input type="submit" value="Go">
                </form>
                <!--SOCIAL ICONS-->
                <div class="icon-links icon-social social-colors-hover">
                    <a target="_blank" class="facebook" href="#"><i class="icon-facebook"></i></a>
                    <a target="_blank" class="twitter" href="#"><i class="icon-twitter"></i></a>
                    <a target="_blank" class="linkedin" href="#"><i class="icon-linkedin"></i></a>
                </div>
                <!--LAN MEMU-->
                <ul class="lan-menu">
                    <li class="dropdown">
                        <a href="#"><img src="image.jpg" />EN </a>
                        <ul>
                            <li><a href="#"><img src="image.jpg" />IT</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--MAIN MENU -->
    <div class="container">

    </div>
</nav>

Settings

Name Type Description
Animations Attribute Add the attribute data-menu-anima="animation-name" to the menu. For the animations list and for more details visit the animations page.
Menu height CSS To set the menu height use this CSS: 
.menu-cnt > ul > li > a,body > nav .menu-brand,.menu-right,body > nav:not(.menu-fixed) > .container {
    height: 123px;
    line-height: 123px;
}
Menu code location Information The menu code must be placed inside the body on top, underneath the loader. For more details about the page structure visit the getting started page.
Update on scroll CSS
  • Add the class scroll-hide to any item to hide it on page scroll.
  • Add the class scroll-show to any item to show it only on page scroll.
  • Add the class scroll-change to any item to apply the class scroll-css to it only on page scroll.
For more details visit the javascript page.
Transparent CSS Add the class menu-transparent to the menu to make it transparent. Add the class light to make all colors white, usueful with dark backgrounds. You can convert any menu to the transparent version by add classes bg-transparent, menu-transparent to header object.
Try it Transparent menu
Custom area HTML Add the code <div class="menu-custom-area"></div> inside the menu-right area, as first element. This element accept any HTML and can be used to insert custom contents.
Full width CSS Add the class menu-wide to the menu to make it full width.
Right alignment CSS Add the class align-right to the menu to align it to the right.
Fixed top CSS Add the class menu-fixed to the menu to maintain the menu always visible on top.
Active item CSS Add class active to the menu item you want to show as active.
One page --
  • Add the class menu-one-page to the menu.
  • Set the href="#ID" attribute of each menu link with the ID of the area you want to link the item to.
  • Add the attribute data-scroll-detect="true" to the menu to update the active menu item automatically on page scroll.
Top icon menu CSS Add the class menu-icon-top to the menu to position the menu icons on top.
Icons list Information Font Awesome Icons Mind
Big box content Information The menu big box type's big area accept any content, usually it contain some colum and inside them the icon box component. For more details visit the css page and the icons page.
Side collapse Information Add the class menu-side-collapse to the side menu to make it collapsable. This feature require the installation of the scroll box plugin:
<script src='themekit/scripts/slimscroll.min.js'></script>
For more details visit the scroll box page. 
<li>
    <a href="#">Menu item</a>
</li>

<li class="dropdown">
    <a href="#">Menu item</a>
    <div class="mega-menu">
        <div class="col">
            <ul class="icon-list">
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
            </ul>
        </div>
    </div>
</li> 

<li class="mega-dropdown">
    <a href="#">Menu item</a>
    <div class="mega-menu">
        <div class="col">
            <h5>Header</h5>
            <ul class="icon-list">
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="col">
            <h5>Header</h5>
            <ul class="icon-list">
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="col">
            <h5>Header</h5>
            <ul class="icon-list">
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
            </ul>
            <h5>Header</h5>
            <ul class="icon-list">
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
            </ul>
        </div>
    </div>
</li>  

<li class="mega-dropdown mega-tabs">
    <a href="#">Tabs mega dropdown</a>
    <div class="mega-menu">
        <div class="tab-box" data-tab-anima="fade-in">
            <ul class="tab-nav">
                <li class="active"><a href="#">Tab name</a></li>
                <li><a href="#">Tab name</a></li>
            </ul>
            <div class="panel active">
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
            </div>
            <div class="panel">
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>Header</h5>
                    <ul class="icon-list">
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                        <li><i class="im-paper-plane"></i> <a href="#">Menu item</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</li> 

<li class="dropdown">
    <a href="#">Dropdown</a>
    <ul>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
    </ul>
</li> 

<li class="dropdown">
    <a href="#">Dropdown multi level</a>
    <ul>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li class="dropdown-submenu">
            <a>Dropdown</a>
            <ul>
                <li><a href="#">Menu item</a></li>
                <li><a href="#">Menu item</a></li>
                <li class="dropdown-submenu">
                    <a href="#">Dropdown</a>
                    <ul>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
Name Type Description
Code location Information Insert the code snippets above into the <div class="menu-cnt"><ul> </ul></div> code block of the menu.
Mega menu image CSS Add the css style background-image:url(image.jpg) to the <div class="mega-menu"></div> code block to set a background image.
Tabs Information The tabs type require the installation of the tabs plugin:
<script src='themekit/scripts/tab-accordion.js'></script>
For more details visit the tabs page.
Icons list Information Font Awesome Icons Mind
Dropdown types preview

Components

<form role="search" method="get" id="searchform" class="search-bar">
    <input type="text" class="form-control" placeholder="Search ...">
    <input type="submit" value="Go">
</form> 

<form role="search" method="get" id="searchform" class="search-btn">
    <div class="search-box-menu">
        <input type="text" placeholder="Search ...">
        <i></i>
    </div>
</form> 

<div class="icon-links icon-social social-colors-hover">
    <a target="_blank" class="facebook" href="#"><i class="icon-facebook"></i></a>
    <a target="_blank" class="twitter" href="#"><i class="icon-twitter"></i></a>
    <a target="_blank" class="linkedin" href="#"><i class="icon-linkedin"></i></a>
</div> 

<div class="shop-menu-cnt shop-menu-empty">
    <i><span class="cart-count">0</span></i>
    <div class="shop-menu">
        <ul class="shop-cart">
            <li class="cart-item">
                <img src="image.jpg">
                <div class="cart-content">
                    <h5>Product 1</h5>
                    <span class="cart-quantity">
                        1 x $99.00
                    </span>
                </div>
            </li>
            <li class="cart-item">
                <img src="image.jpg">
                <div class="cart-content">
                    <h5>Product 2</h5>
                    <span class="cart-quantity">
                        1 x $99.00
                    </span>
                </div>
            </li>
        </ul>
        <p class="cart-total">
            Subtotal: <span>$299.00</span>
        </p>
        <p class="cart-buttons">
            <a href="#" class="cart-view">View Cart</a>
            <a href="#" class="cart-checkout">Checkout</a>
        </p>
    </div>
</div> 

<ul class="lan-menu">
    <li class="dropdown">
        <a href="#"><img src="flag.jpg" />EN </a>
        <ul>
            <li><a href="#"><img src="flag.jpg" />IT</a></li>
            <li><a href="#"><img src="flag.jpg" />ES</a></li>
        </ul>
    </li>
</ul>
Name Type Description
Code location Information Insert the code snippets above into the <div class="menu-right"> </div> code block of the menu or mini area. The side menu is not compatible with some component.
Social icons Information For more details and for the icons list visit the social page.
Shopping cart empty CSS Add the class shop-menu-empty to the shopping cart component if it's empty.
Global CSS
Global JS
Inner menu