Navigation overview

Horizontal navigation - type of navigation that is used in the top/bottom navbars and has horizontal direction: left to right or right to left in RTL version. By default horizontal navigation is a part of navbar component and can include a simple link, link with icon and dropdown menu. Navigation can be placed in main navbar or in secondary navbar. Can be used in all layouts: with sidebar, 3 columns, double and dual sidebars, bottom navbar, fixed navbar etc. Default placement is main navbar. Horizontal navigation supports options:

Option Description
Navigation placement Simple usage of horizontal navigation allows to add simple navigation links to the main navbar: left or right position, excluding navbar header area with logo. For more advanced usage navigation can have multiple menu levels, tabbed navigation option, links with icons, inline and absolute positioned labels and badges etc. And can be placed in separate secondary navbar or in both navbars: top or bottom, fixed or static. Everything depends on specific needs. Since horizontal navigation is a part of navbar component, is does support all available navbar options, components, sizes, colors etc.
Double side navigation By default horizontal navigation supports 2 main positions: left and right. For these positions are responsible 2 classes: .navbar-left and navbar-right that can be added to all navbar components to align them properly. For more advanced options like 3 or more positions, add grid columns inside navbar content. But please note: BS grid is mobile-first, if you need to use responsive columns, they wrap to a new line on certain screen size. To avoid this issue use .col-xs-* classes.
Multiple level dropdowns Horizontal navigation supports multiple menu levels with different directions. Navigation menu uses default markup for Bootstrap dropdown menus and opens children levels on click. Another option available - show submenu on hover using hover_dropdown.js plugin. Navigation dropdopwns support all available options for dropdown menus: border and background colors, icons, headers, dividers etc. For example - they can be white or match navbar background color by adding .bg-* and border-* classes to the dropdown.
Additional styling Depending on navbar background color, navigation menu automatically adjust link colors for parent level. By default all dropdowns have white background color, but this color can be changed by adding proper classes to the dropdown menu list. Available options are: border width and border color - .border-* class; background color - .bg-* class; active state background color - .element-* class.
Navigation options
Open submenu on click

By default dropdown menu opens on click. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. Horizontal navigation supports left and right menu directions, full width mega menu and submenus.

Example markup:

<!-- Left aligned navigation -->
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
		</ul>
	</li>
</ul>
<!-- /left aligned navigation -->

<!-- Right aligned navigation -->
<ul class="nav navbar-nav navbar-right">
	<li><a href="#">Link</a></li>
	<li><a href="#">Another link</a></li>
	<li><a href="#">One more link</a></li>
</ul>
<!-- /right aligned navigation -->
Open submenu on hover

By default dropdown menu opens on click. Optionally it can be changed to hover by adding data-hover="dropdown" data attribute to the parent link, right there where your data-toggle="dropdown" is, no Javascript needed. Also include path to hover_dropdown.min.js file. This plugin doesn't remove click functionality, but adds an ability to open all submenu levels on hover.

Example markup:

<!-- Left aligned navigation -->
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
			Dropdown <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
		</ul>
	</li>
</ul>
<!-- /left aligned navigation -->

<!-- Right aligned navigation -->
<ul class="nav navbar-nav navbar-right">
	<li><a href="#">Link</a></li>
	<li><a href="#">Another link</a></li>
	<li><a href="#">One more link</a></li>
</ul>
<!-- /right aligned navigation -->
Optional elements

Horizontal navigation is a navbar component. It means that it can be used along with all default and custom components: forms, buttons, text, selects, progress bars, checkboxes, radios, labels, badges, file uploaders etc. Also all of them look similar in all navbar styles and sizes. Please note: some components require additional color options, such as switchery, checkboxes/radios, file uploader and select2.

Example markup with form elements:

<!-- Left aligned navigation -->
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>
<!-- /left aligned navigation -->

<!-- Left aligned search form -->
<form class="navbar-form navbar-left" action="#">
	<div class="form-group has-feedback">
		<input type="search" class="form-control input-xs bg-primary" placeholder="Search">
		<div class="form-control-feedback">
			<i class="icon-search4 text-normal"></i>
		</div>
	</div>
</form>
<!-- /left aligned search form -->

<!-- Right aligned form -->
<div class="navbar-right">
	<form class="navbar-form navbar-left" action="#">
		<div class="checkbox-inline checkbox-right">
			<input type="checkbox" id="stay-online" class="styled" checked="checked">
			<label for="stay-online">Stay online</label>
		</div>
	</form>
</div>
<!-- /right aligned form -->
Tabbed navigation

Replace standard navigation links with quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Add data-toggle="tab" to the navbar navigation links and specify id's. Tabs content needs to be placed in div's that have unique id's, .tab-pane class and .tab-pane.active classes for active pane. Wrap all content panes in <div class="tab-content no-padding />" div.

Example markup with tabbed navigation:

<!-- Tabbed navigation -->
<ul class="nav navbar-nav">
	<li class="active"><a href="#tab-demo1" data-toggle="tab">Active tab</a></li>
	<li><a href="#tab-demo2" data-toggle="tab">Second tab</a></li>
	<li><a href="#tab-demo3" data-toggle="tab">Third tab</a></li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#tab-demo4" data-toggle="tab">Another tab</a></li>
			<li><a href="#tab-demo5" data-toggle="tab">One more tab</a></li>
		</ul>
	</li>
</ul>
<!-- /tabbed navigation -->

<!-- Tabbed navigation content -->
<div class="tab-content">
	<div class="tab-pane fade active in" id="tab-demo1">Tab 1 content</div>
	<div class="tab-pane fade" id="tab-demo2">Tab 2 content</div>
	<div class="tab-pane fade" id="tab-demo3">Tab 3 content</div>
	<div class="tab-pane fade" id="tab-demo4">Tab 4 content</div>
	<div class="tab-pane fade" id="tab-demo5">Tab 5 content</div>
</div>
<!-- /tabbed navigation content -->
Mega menu
Overview

Mega menu is a group of custom navbar components that uses slightly modified BS dropdown markup and native styling. Basically dropdown menu may contain any component - text blocks, lists, galleries, tabs, forms, tables, accordion, panels, buttons etc. However since default dropdown menu closes itself on first click, some extra js code is needed to stop propagation. In this case dropdown toggle inside dropdown menu doesn't work by default and needs additional modifications. See the table with necessary classes and description below.

Example markup:

<!-- Navigation with mega menu -->
<ul class="nav navbar-nav">

	<!-- Auto width -->
	<li class="mega-menu">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Auto width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /auto width -->


	<!-- Fixed width -->
	<li class="dropdown">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Auto width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content width-300">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /fixed width -->


	<!-- Full width -->
	<li class="mega-menu mega-menu-wide">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Full width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /full width -->

</ul>
<!-- /navigation with mega menu -->
Menu and content options

All mega dropdowns support additional options for menu itself and content inside - menu header, menu footer, block titles, custom colors for menu's list background and menu borders, or its components. Different types of lists support all components and options available for basic dropdown menu component, such as labels, badges, switches, icons, headers etc. Custom background colors available only for simple dropdown menu.

Example heading markup:

<!-- Dropdown menu with heading -->
<div class="dropdown-menu dropdown-content">

	<!-- Dropdown heading -->
	<div class="dropdown-content-heading">
		<ul class="icons-list">
			<li>
				<a href="#">
					<i class="icon-menu7"></i>
				</a>
			</li>
		</ul>
	</div>
	<!-- /dropdown heading -->


	<!-- Dropdown content -->
	<div class="dropdown-content-body">
		...
	</div>
	<!-- /dropdown content -->

</div>
<!-- /dropdown menu with heading -->

Example footer markup:

<!-- Dropdown menu with footer -->
<div class="dropdown-menu dropdown-content">

	<!-- Dropdown content -->
	<div class="dropdown-content-body">
		...
	</div>
	<!-- /dropdown content -->


	<!-- Dropdown footer -->
	<div class="dropdown-content-footer">
		<a href="#">
			See all messages <i class="icon-circle-right2"></i>
		</a>
	</div>
	<!-- /dropdown footer -->

</div>
<!-- /dropdown menu with footer -->
Mega menu grid

Mega menu component supports a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row inside mega menu dropdown.

Example markup:

<!-- Dropdown menu grid -->
<div class="dropdown-menu dropdown-content">
	<div class="dropdown-content-body">
		<div class="row">
			<div class="col-md-3 col-sm-6">First column content</div>
			<div class="col-md-3 col-sm-6">Second column content</div>
			<div class="col-md-3 col-sm-6">Third column content</div>
			<div class="col-md-3 col-sm-6">Fourth column content</div>
		</div>
	</div>
</div>
<!-- /dropdown menu grid -->
Mega menu classes

Mega menu - responsive navbar component driven by CSS and a small piece of jquery code. This table displays custom classes for navbar mega menu needed for proper look and correct functionality.

Class Description
.dropdown-content Prevents dropdown menu from closing on click. Some of the components need additional jquery initialization such as tabs and children dropdowns
li.mega-menu This class changes dropdown menu position from absolute to static to remove dependency from parent container
li.mega-menu-wide Adds 100% width to children dropdown menu. Must be used with .mega-menu class
.dropdown-content-body Similar to .panel-body adds padding to the content. Sometimes some components don't require padding, just remove this div to get a full sized content without spacing
.menu-list Specific class for menu lists. It adds additional padding to list items and adds background color to hover and focus states
.menu-heading Headings for menu content. 2 options available: default and underlined. For underlined heading add .underlined class to the same div
.dropdown-content-heading Dropdown menu heading. Supports custom background color options and list of links. See examples below
.dropdown-content-footer Dropdown menu footer. Could be both link and group of content similar to dropdown heading. See examples below
.dropdown-content.col-* Optional column classes for %-based width of the dropdown menu. This type of dropdowns don't have fixed width and change it according to the window size
Component classes

The table below contains default navbar classes for components available for use in the navbar component. Control navigation and elements placement, color theme of navbar and child elements, dropdown menu appearance and positioning, sizing by adding or removing proper class:

Class Description
.navbar-nav Default navbar navigation class, must be used with any navigation type and color. Responsible for basic navigation styling.
.navbar-left, .navbar-right Positioning classes. Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction
.navbar-form Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.
.navbar-btn Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar. Supports default, small and mini button sizes.
.navbar-text Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
.navbar-link For standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.
data-hover="dropdown" This data attribute shows submenu on hover instead of click. Needs to be added to the parent navigation link after data-toggle="dropdown". Requires hover_dropdown.min.js file to be added.
.navbar.bg-*, .navbar-header.bg-* Apply custom background color to the whote navbar or navbar header only. All navbar components automatically adjust their styling according to the navbar color.
.disabled Disable any navbar navigation item by adding .disabled class to the <li> element. To disable item in hover navigation version, data-hover="dropdown" needs to be removed as well.