Vertical Navmenu

Vertical navmenus are used to show a list of options that the user can select. There are a couple different vertical navmenus that can be made.

Navmenus aligned to the left or right
Navmenus that are not aligned to one side specifically

For navmenus aligned to either the left or the right, no border radius is applied by default. Navmenus that could appear anywhere are given the same border radius as the card components.

Headers are optional for the navmenus, but they are recommended for adding more context for what the navmenu relates to.

Basic Vertical Navmenu

Vertical Navmenu Code

<nav class="vertical-navmenu text-centered fw-200">
    <header>
        <h3>Vertical navmenu</h3>
    </header>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
    </ul>
</nav>

Vertical Navmenu With Dropdown

Vertical Navmenu Dropdown Code

<nav class="vertical-navmenu text-centered fw-200">
    <ul>
        <li><a href="#">Option 1</a></li>
        <li>
            <input type="checkbox" id="expandable-section-toggle" class="expandable-section-toggle">
            <label for="expandable-section-toggle">Option 2</label>
            <ul class="expandable-section">
                <li><a href="#">Suboption 1</a></li>
                <li><a href="#">Suboption 2</a></li>
                <li><a href="#">Suboption 3</a></li>
            </ul>
        </li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
    </ul>
</nav>