Navigation dropdown

Dropdown on mouse over navigation

Navigation multiple levels, css only

A basic navigation can handle up to 3 levels of links in this automatic css-only manner. Note: change of orientation on the breakpoint mobile to desktop, class _vertical maintains mobile style throughout. Any distribution or color class can be applied.

<!-- PRIMARY -->
<nav class="navigation _primary">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item TEST</a>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a>
			<a href="#category-1-1" data-fc-class="swish" data-fc-modules="toggle" class="toggle">
				<i class="icon-caret-down"></i>
			</a>
			<ul id="category-1-1">
				<li><a title="Menu item 1" href="#tab1">Sub item 1</a></li>
				<li><a title="Menu item 2" href="#tab1">Sub item 2</a></li>
				<li><a title="Menu item 3" href="#tab1">Sub item 3</a>
					<ul>
						<li><a title="Menu item" href="#tab1">Aliquam eleifend velit consequat</a></li>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Mauris non maximus lorem</a></li>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Mauris non maximus lorem</a></li>
					</ul>
				</li>
				<li><a title="Menu item 4" href="#tab1">Sub item 4</a></li>
				<li><a title="Menu item 5" href="#tab1">Sub item 5</a>
					<ul>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Mauris non maximus lorem</a></li>
						<li><a title="Menu item" href="#tab1">Aliquam ut </a></li>
						<li><a title="Menu item" href="#tab1">Aliquam consequat</a></li>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Mauris non maximus lorem</a></li>
					</ul>
				</li>
				<li><a title="Menu item 6" href="#tab1">Sub item 6</a></li>
			</ul>

		</li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a>
			<ul>
				<li><a title="Menu item 1" href="#tab1">Sub item 1</a>
					<ul>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Mauris non maximus lorem</a></li>
					</ul>
				</li>
				<li><a title="Menu item 2" href="#tab1">Sub item 2</a></li>
				<li><a title="Menu item 3" href="#tab1">Sub item 3</a>
					<ul>
						<li><a title="Menu item" href="#tab1">Praesent neque purus</a></li>
						<li><a title="Menu item" href="#tab1">Aliquam ut odio eleifend, pharetra ex non, tincidunt elit. Fusce fringilla pulvinar leo dictum hendrerit. Aliquam laoreet libero ac dui feugiat, ac eleifend velit consequat</a></li>
					</ul>
				</li>
				<li><a title="Menu item 4" href="#tab1">Sub item 4</a></li>
			</ul>
		</li>
	</ul>
</nav>

.navigation-vertical with dropdown

<nav class="navigation _primary _vertical w-30" data-fc-modules="dropdown">
    <ul>
        <li>
            <a title="Fruits" href="test.html">Hover (href is test.html)</a>
            <ul>
                <li>
                    <a title="Oranges" href="test.html">Another level</a>
                    <ul>
                        <li>
                            <a title="Menu item 1" href="test.html">Oranges OrangesOranges OrangesOranges</a>
                            <ul>
                                <li><a title="Menu item 1" href="#tab-vertical-1">Oranges OrangesOranges OrangesOranges</a></li>
                                <li><a title="Menu item 2" href="#tab-vertical-2">Apples</a></li>
                                <li><a title="Menu item 3" href="#tab-vertical-3">Bananas</a></li>
                            </ul>
                        </li>
                        <li><a title="Menu item 2" href="#tab-vertical-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-vertical-3">Bananas</a></li>
                    </ul>
                </li>
                <li>
                    <a title="Apples" href="test.html">Yep, more level</a>
                    <ul>
                        <li><a title="Menu item 1" href="#tab-vertical-1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab-vertical-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-vertical-3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Bananas" href="#tab-vertical-3">Bananas</a></li>
            </ul>
        </li>
        <li>
            <a title="Vegetables" href="#vegetables-vertical">Click (href is #vegetables) </a>
            <ul id="vegetables-vertical">
                <li>
                    <a title="Menu item 1" href="#oranges-vertical">Oranges</a>
                    <ul id="oranges-vertical">
                        <li><a title="Menu item 1" href="#tab-vertical-1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab-vertical-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-vertical-3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Menu item 2" href="#tab-vertical-2">Apples</a></li>
                <li><a title="Menu item 3" href="#tab-vertical-3">Bananas</a></li>
            </ul>
        </li>
        <li><a title="Menu item 3" href="#tab-vertical-3">Lettuce</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;