Navigation

Basic navigation

The basic ensemble navigation, follows the familiar pattern of an unordered list, with anchor tags nested in list elements.

following BEM notation, we have given our navigation ul a class of nav each top level list item has the class nav-item.


<nav class="desktop-nav float-right">
	<ul class="nav">
		<li class="nav-item"><a href="#">page 1</a></li>
		<li class="nav-item"><a href="#">page 2</a></li>
		<li class="nav-item"><a href="#">page 3</a></li>
		<li class="nav-item"><a href="#">page 4</a></li>
	</ul>
</nav>

Sub navigation

Ensemble navigation can have an unlimited number of drop-downs to display sub navigation or sub menus. displaying one level of drop-down navigation is as simple as nesting a new list.

In the example opposite you can see how we create a drop-down sub navigation, the main navigation list item has the class has-submenu the sub navigation ul has the class is-submenu.


<nav class="desktop-nav float-right">
	<ul class="nav">
		<li class="nav-item"><a href="#">page 1</a></li>
			<li class="nav-item has-submenu">
				<a href="#">Drop down</a>
				<ul class="is-submenu">
					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
				</ul>
			</li>
		<li class="nav-item"><a href="#">page 3</a></li>
		<li class="nav-item"><a href="#">page 4</a></li>
	</ul>
</nav>

Multi level sub navigation

Creating multi level drop down navigation is a simple case of repeating the pattern of creating a single drop-down multiple times.

Creating multiple levels of navigation is as easy as nesting lists.


<nav class="desktop-nav float-left">
	<ul class="nav">
		<li class="nav-item"><a href="#">page 1</a></li>
			<li class="nav-item has-submenu">
				<a href="#">Drop down</a>
				<ul class="is-submenu">
					<li><a href="#">Sub nav</a></li>

						<li class="has-submenu">
							<a href="#">Drop down</a>
							<ul class="is-submenu">
								<li><a href="#">Sub nav 2</a></li>
								<li><a href="#">Sub nav 2</a></li>
								<li><a href="#">Sub nav 2</a></li>
								<li><a href="#">Sub nav 2</a></li>
								<li><a href="#">Sub nav 2</a></li>
							</ul>
						</li>

					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
					<li><a href="#">Sub nav</a></li>
				</ul>
			</li>
		<li class="nav-item"><a href="#">page 3</a></li>
		<li class="nav-item"><a href="#">page 4</a></li>
	</ul>
</nav>

Mega menus

Mega menus can be created using the Ensemble grid system to give you ultimate control of your mega menu layout.

Mega menus are created in much the same way as standard drop-downs, first add a class of has-megamenu to your navigation list item, then create a div with the class is-megamenu inside the list item, you can then add Ensemble grid elements to your mega menu. Inside megamenu columns you can add standard submenus.


<nav class="desktop-nav float-right">
	<ul class="nav">
		<li class="nav-item"><a href="#">page 1</a></li>

			<li class="nav-item has-megamenu">
				<a href="#">Mega menu</a>
				<div class="is-megamenu">
					<div class="grid-container">
						<div class="grid-row">

							<div class="column-4">
								<ul class="is-submenu">
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
								</ul>
							</div>

							<div class="column-4">
								<ul class="is-submenu">
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
								</ul>
							</div>

							<div class="column-4">
								<ul class="is-submenu">
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
									<li><a href="#">Mega menu item</a></li>
								</ul>
							</div>

						</div>
					</div>
				</div>
			</li>

		<li class="nav-item"><a href="#">page 3</a></li>
		<li class="nav-item"><a href="#">page 4</a></li>
	</ul>
</nav>