Tutorial

Submenu indicators

Add the submenu indicators automatically or manually

A submenu indicator indicates whether an item has a dropdown or megamenu. These indicators can be added automatically or manually.

Auto-added indicators

This is the default. If your navigation has a submenu, the indicators will be added automatically.

Manually Added Indicators

In certain circumstances, you may prefer to add indicators manually. This may be necessary when you have a very heavy page and want to optimize at the maximum the use of Javascript code.

1 - Turn off the automatic indicators:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    autoSubmenuIndicator: false
});

2 - For each submenu add the indicator into the previous "navigation-link" element:

Copy

<!-- A navigation item with a dropdown -->
<li class="navigation-item">
    <a class="navigation-link" href="#">
        Services
        <span class="submenu-indicator"></span>
    </a>
    <ul class="navigation-dropdown">
        <li class="navigation-dropdown-item">
            <a class="navigation-dropdown-link" href="#">Dropdown item</a>
        </li>
        <li class="navigation-dropdown-item">
            <a class="navigation-dropdown-link" href="#">Dropdown item</a>
        </li>
        <li class="navigation-dropdown-item">
            <a class="navigation-dropdown-link" href="#">Dropdown item</a>
        </li>
        <li class="navigation-dropdown-item">
            <a class="navigation-dropdown-link" href="#">Dropdown item</a>
        </li>
    </ul>
</li>

Copy

<!-- A navigation item with a megamenu -->
<li class="navigation-item">
    <a class="navigation-link" href="#">
        Services
        <span class="submenu-indicator"></span>
    </a>
    <div class="navigation-megamenu">
        <div class="navigation-megamenu-container">
            ...
        </div>
    </div>
</li>

See the list of tutorials for other ways to modify the navigation bar and add features.