SwNav plugin

A perfect solution for complex menus.

See the working example below. Feel free to customize each option in edit area.

Customization area

Customize the menu via this Nav Builder and hit big button to get the code.

Change size of your browser window to see the adaptive version of the menu.

Remember that you always can change appearance of the menu by using regular css if you didn't find any feature in this builder.

Submenu open mode

On touch-devices submenu opens by click on caret.

Align items

Stretch Items

Collapsible On Small Screens

Fixed

Max Width of All Items

Submenu Type

With Logo Image

Nav Edge

Unavailable when navbar style enabled.

Background transition

Navbar style

With Second Text Line

With Icons

FontAwesome in demo, see more.
You can use any other font icons or images instead.

Item Text Align

Item Text Transform

Colors

Normal Hover Active
Text color
Icon Color
Item Background
Border Color

Colors Presets

Get the code!

Features

Responsive Is adaptive to any screen: mobile, tablet and PC Ready Out-of-The-Box Just include few files on your page!
Configurable Just use specified CSS class to add the behavior you need HTML5 and CSS3 Modern technologies
Well Documented Good documentation and usage examples Visual Configurator Build your own theme, no coding required
Supports Modern Browsers Working in Firefox, Chrome and IE9+ Fallback For browsers that doesn't support flexbox

Docs

Copy any class and add it to <div class="sw-nav"></div> element.

CSS class Description
sw-jc-end

Align menu items right.

sw-jc-center

Align menu items center.

sw-jc-sb

Align menu items with space between.

sw-jc-sa

Align menu items with space around.

sw-if-1-1-a

Stretch items to fill all available space.

sw-collapsible

Collapse on small screens to burger icon.

sw-nav--fixed-top

Fix nav at top of page.

sw-nav--fixed-bottom

Fix nav at bottom of page.

sw-nav--smt-2

Second type of submenu: full-width accordion.

sw-nav--with-logo

Display logo item.

sw-nav--with-bl-shadow

Display shadow below the nav.

sw-nav--with-bl-border

Display border below the nav.

sw-nav--with-icons

Shows icons inside first-level items.

sw-nav--with-second-line

Shows the second line of text below first-level item title.

sw-nav--iac

Align content center inside first-level item.

sw-nav--iar

Align content right inside first-level item.

sw-nav--tt-uc

Transform all text inside nav item to uppercase.

sw-nav--tt-lc

Transform all text inside nav item to lowercase.

sw-nav--tt-c

Capitalize all text inside nav item.

sw--bg-transition

Enables background transition.

new in 1.1
sw--hover-mode

Opens submenu by hover on item.

new in 1.1
sw--navbar-rounded

Rounded navbar edges

new in 1.1

Full code example:

<!-- Optional: include if you use icons in menu -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Optional: include for fallback to IE9 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<!-- jQuery is required -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Our plugin -->
<link rel="stylesheet" href="sw-nav.css">
<script src="sw-nav.js"></script>
<script>
	$(function () {
		// create our menu
		new SwNav($('.sw-nav'));
	});
</script>

<!-- Custom theme (get from http://swnav.swypse.ru/ builder): -->
<style>
...
</style>

<!-- HTML -->
<div class="sw-nav ... "> <!-- Place configuration class here -->
	<div class="sw-nav--toggler">
		<span class="sw-nav--toggler-icon"></span>
	</div>
	<div class="sw-nav--items">
		<ul class="sw-nav--list">
			<li class="sw-nav--item sw-nav--item-logo">
				<a href="#" class="sw-nav--link sw-nav--link-logo">
					<img class="sw-nav--logo" src="logo.png" alt="logo">
				</a>
			</li>
			<li class="sw-nav--item sw-nav--item-l0">
				<a href="#" class="sw-nav--link">
					<span class="sw-nav--icon"><i class="fa fa-rocket"></i></span>
					<span class="sw-nav--title">
						First level link
						<span class="sw-nav--title-line">
							Second line
						</span>
					</span>
				</a>
			</li>
			<li class="sw-nav--item sw-nav--item-l0 sw-nav--item-has-sub">
				<a href="#" class="sw-nav--link">
					<span class="sw-nav--caret"></span>
					<span class="sw-nav--icon"><i class="fa fa-rocket"></i></span>
					<span class="sw-nav--title">
						First level link with submenu
						<span ng-if="model.o.showTitleLine" class="sw-nav--title-line">
							Second line
						</span>
					</span>
				</a>
				<div class="sw-nav--items sw-nav--sub">
					<ul class="sw-nav--list">
						<li class="sw-nav--item">
							<a href="#" class="sw-nav--link">
								<span class="sw-nav--title">
									Second level link
								</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</div>