Horizontal menus

Horizontal menus documentation with live examples

  1. Home
  2. Inner menu
  3. Horizontal menus

Variants

Vertical Horizontal

Classic

Menu

Minimal

Menu

Rounded

Menu

Usage

<div class="navbar navbar-inner">
    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav inner">
            <li class="current-active active"><a href="#A">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <i class="caret"></i></a>
                <ul class="dropdown-menu multi-level">
                    <li><a href="#B">Action</a></li>
                    <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a href="#C">Action</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#D">Menu 2</a></li>
            <li><a href="#E">Menu 3</a></li>
            <li><a href="#F">Menu 4</a></li>
        </ul>
    </div>
</div>

<div class="fixed-top">
    <div class="fixed-area full-width-menu">
        <div class="container"> 
            <div class="row">
                <ul class="nav navbar-nav inner">
                    <li class="current-active active"><a href="#examples">Examples</a></li>
                    <li><a href="#usage">Usage</a></li>
                    <li><a href="#settings">Main settings</a></li>
                </ul>
            </div>
                
        </div>
    </div>
</div>

Main settings

Name Type Description
Style minimal CSS class Add class ms-minimal to menu object. Example: <ul class="nav navbar-nav ms-minimal inner"> ... </ul>.
Style rounded CSS class Add class ms-rounded to menu object. Example: <ul class="nav navbar-nav ms-rounded inner"> ... </ul>.
Center alignment CSS class Add class nav-center to menu object. Example: <ul class="nav navbar-nav inner"> ... </ul>.
Right alignment CSS class Add class nav-right to menu object. Example: <ul class="nav navbar-nav nav-right inner"> ... </ul>.
Full width menu HTML Insert the menu into a container with class full-width-menu.
Fixed area Mixed To set a menu to be always visible and fixed on the screen add class fixed-area to menu object. You can set the distance from top with attribute data-topscroll="123", replace 123 with n° of px. Fixed area is a feature of components - base. Full documentation here
Active menu item CSS class To set te current active item add classes current-active active to li menu item.
One-page scroll menu CSS class To set a one-page menu that scroll on differents areas of the same page add class one-page-menu to menu object.
Scroll spy Mixed Add attributes data-spy="scroll" data-target="#menu-id" to content container, add id="menu-id" to menu object.
Scroll spy is a feature of menu documentation. Full documentation here
Menu global documentation

Menu - inner Bootstap is part of menu component. Complete documentation here