CSS JS Navigation with Dropdown

.navigation with dropdown

	                <nav class="navigation" 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="#tab1">Oranges OrangesOranges OrangesOranges</a></li>
                                <li><a title="Menu item 2" href="#tab2">Apples</a></li>
                                <li><a title="Menu item 3" href="#tab3">Bananas</a></li>
                            </ul>
                        </li>
                        <li><a title="Menu item 2" href="#tab2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab3">Bananas</a></li>
                    </ul>
                </li>
                <li>
                    <a title="Apples" href="test.html">Yep, more level</a>
                    <ul>
                        <li><a title="Menu item 1" href="#tab1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Bananas" href="#tab3">Bananas</a></li>
            </ul>
        </li>
        <li>
            <a title="Vegetables" href="#vegetables">Click (href is #vegetables) </a>
            <ul id="vegetables">
                <li>
                    <a title="Menu item 1" href="#oranges">Oranges</a>
                    <ul id="oranges">
                        <li><a title="Menu item 1" href="#tab1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Menu item 2" href="#tab2">Apples</a></li>
                <li><a title="Menu item 3" href="#tab3">Bananas</a></li>
            </ul>
        </li>
        <li><a title="Menu item 3" href="#tab3">Lettuce</a></li>
    </ul>
</nav>

                

.navigation-vertical with dropdown

	                <nav class="navigation navigation-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>

                

.navigation-sub with dropdown

	                <nav class="navigation navigation-sub" 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-sub-1">Oranges OrangesOranges OrangesOranges</a></li>
                                <li><a title="Menu item 2" href="#tab-sub-2">Apples</a></li>
                                <li><a title="Menu item 3" href="#tab-sub-3">Bananas</a></li>
                            </ul>
                        </li>
                        <li><a title="Menu item 2" href="#tab-sub-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-sub-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-sub-1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab-sub-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-sub-3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Bananas" href="#tab-sub-3">Bananas</a></li>
            </ul>
        </li>
        <li>
            <a title="Vegetables" href="#vegetables-sub">Click (href is #vegetables) </a>
            <ul id="vegetables-sub">
                <li>
                    <a title="Menu item 1" href="#oranges-sub">Oranges</a>
                    <ul id="oranges-sub">
                        <li><a title="Menu item 1" href="#tab-sub-1">Oranges OrangesOranges OrangesOranges</a></li>
                        <li><a title="Menu item 2" href="#tab-sub-2">Apples</a></li>
                        <li><a title="Menu item 3" href="#tab-sub-3">Bananas</a></li>
                    </ul>
                </li>
                <li><a title="Menu item 2" href="#tab-sub-2">Apples</a></li>
                <li><a title="Menu item 3" href="#tab-sub-3">Bananas</a></li>
            </ul>
        </li>
        <li><a title="Menu item 3" href="#tab-sub-3">Lettuce</a></li>
    </ul>
</nav>

                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-navigation-vars-custom: (

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