Horizontal Nav - Tabbed

Statistics Invoices Schedule
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 navigation

Images tab content
Music tab content
Dribbble statistics tab content
Pinterest statistics tab content
Github statistics tab content
Stack Overflow statistics tab content

Example markup:

<!-- 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 -->
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 navigation

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 -->
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:
1. 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.

2. 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.

3. 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.

4. 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.

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.
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com