Limitless - Responsive Web Application Kit by Eugene Kopyov-后台管理系统模板

Custom 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 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>
</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 -->

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.

Horizontal Nav - Custom Elements