Horizontal Navmenu

A horizontal navmenu is a navmenu that provides the user of the site options to select. As the name suggests, it's laid out horizontally, much like the primary navmenu at the top of this page on desktops.

A horizontal navmenu MAY contain dropdowns, but be aware that the dropdowns will not expand properly on mobile without JS (yet). It's recommended to have the dropdown element link to a page with a way to access it's dropdown elements for mobile users.

Horizontal Navmenu Example

<nav class="horizontal-navmenu dark-orange">
    <ul class="horizontal-navmenu-list">
        <li class="horizontal-navmenu-item">
            <a href="#" class="horizontal-navmenu-link brighter-orange-hover darkest-black-text">Thing</a>
        </li>
    </ul>
</nav>

Horizontal Navmenu Example

<nav class="horizontal-navmenu dark-orange">
    <ul class="horizontal-navmenu-list">
        <li class="horizontal-navmenu-item">
            <a href="#" class="horizontal-navmenu-link brighter-orange-hover darkest-black-text">Thing</a>
        </li>
        <li class="horizontal-navmenu-item horizontal-navmenu-dropdown">
            <a href="#" class="horizontal-navmenu-link dropdown-link brighter-orange-hover darkest-black-text">Stuff</a>
            <ul class="dropdown-content dark-orange">
                <li class="horizontal-navmenu-item">
                    <a href="#" class="horizontal-navmenu-link dropdown-item brighter-orange-hover darkest-black-text">Nonsense</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>