Navigation

Main navigation objects using Flex box

Navigation default

<nav class="navigation">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation filled

<nav class="navigation _filled">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation filter

<nav class="navigation _filter">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation on main colors

<!-- PRIMARY -->
<nav class="navigation _primary">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- SECONDARY -->
<nav class="navigation _secondary">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- BOX -->
<nav class="navigation _box">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- FOREGROUND -->
<nav class="navigation _foreground">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- BACKGROUND -->
<nav class="navigation _background">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation filter on main colors

<!-- PRIMARY -->
<nav class="navigation _filter _primary">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- SECONDARY -->
<nav class="navigation _filter _secondary">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- BOX -->
<nav class="navigation _filter _box">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- FOREGROUND -->
<nav class="navigation _filter _foreground">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

<!-- BACKGROUND -->
<nav class="navigation _filter _background">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation small

<nav class="navigation _primary _small">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation large

<nav class="navigation _primary _large">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

.navigation with .form-search

<nav class="navigation">
	<form name="form" action="#" method="post" class="form form-search">
		<input id="post_search-1" type="text" name="search" placeholder="Search..." value="">
		<button type="submit" class="button"><i class="icon-search"></i></button>
	</form>
    <ul>
        <li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
        <li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
        <li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
    </ul>
</nav>

Navigation vertical default

<nav class="navigation _vertical">
	<ul>
		<li>
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
			<ul id="tab1">
				<li class="active">
					<a title="Menu item 1" href="#tab1">Menu item 1</a>
				</li>
				<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
				<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
			</ul>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Navigation vertical primary

<nav class="navigation _vertical _primary">
	<ul>
		<li>
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
			<ul id="tab1">
				<li class="active">
					<a title="Menu item 1" href="#tab1">Menu item 1</a>
				</li>
				<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
				<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
			</ul>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Combine navigations

<nav class="navigation _primary">
	<ul class="mb-n">
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
<nav class="navigation _foreground _filter">
	<ul>
		<li><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li class="active"><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>

Customize the appearance

You can customize the appearance of this object by setting up the vars-custom map for this object. By default de values are the vars-default values.

$object-navigation-vars-default: (

	/* First level */
	background-color: $color-primary,
	color: contrast-color($color-primary),
	border-radius: $default-border-radius,
	font-family: $font-face-default,
	font-weight: normal,
	font-weight-active: bold,
	font-size: $font-size-default,
	vertical-separator: true,
	text-transform: capitalize,

	/* Inner levels */
	background-color-dark: $color-primary-dark,
	background-color-light: $color-primary-light,
	inner-font-family: $font-face-default,
	inner-font-weight: normal,
	inner-font-size: $font-size-s,
	inner-text-transform: capitalize,

) !global !default;

$object-navigation-vars-custom: () !global !default;
$object-navigation-vars: map-merge($object-navigation-vars-default, $object-navigation-vars-custom) !global;