HPUCSS Framework | Dropdown

Button Dropdown

Buttons that have hidden extra options. Please refer to HPUCSS Buttons for more usage info.

HTML


<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <!-- Dropdown Trigger: -->
    <button class="hpu-btn btn-bg-1st dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="menu1Btn">
        Drop This
    </button>

    <!-- Dropdown Menu: -->
    <div class="dropdown-wrap">
        <ul class="dropdown-content" id="menu1Btn" role="menu">
            <li class="dropdown-item">
                <a href="..." class="dropdown-link" role="menuiten" tabindex="0">
                    Option 1 the longest option of them all
                </a>
            </li>

            <li class="dropdown-item">
                <a href="..." class="dropdown-link" role="menuiten" tabindex="0">
                    Option 2
                </a>
            </li>

            <li class="dropdown-item">
                <a href="..." class="dropdown-link" role="menuiten" tabindex="0">
                    Option 3
                </a>
            </li>

            <li class="dropdown-item">
                <a href="..." class="dropdown-link" role="menuiten" tabindex="0">
                    Option 4
                </a>
            </li>

            <li class="dropdown-item">
                <a href="..." class="dropdown-link" role="menuiten" tabindex="0">
                    Option 5
                </a>
            </li>
        </ul>
    </div>
</div>

Button dropdowns are inline-block level elements, so they can be stacked horizontally.

Examples below are shown in outlined buttons:

HTML


<!-- Teal -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn btn-outline-1st dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="tealMenu">
        Teal
    </button>

    ...
</div>

<!-- Light Teal -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn btn-outline-2nd dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="ltTealMenu">
        Light Teal
    </button>

    ...
</div>

<!-- Blue Gray -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn btn-outline-3rd dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="blueGrayMenu">
        Blue Gray
    </button>

    ...
</div>

<!-- Ocean Blue -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn btn-outline-4th dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="oceanBlueMenu">
        Ocean Blue
    </button>

    ...
</div>

Dropdown Menu Alignment

By default, menu options are aligned left, but they can be configured to align center or right by using the Typography text alignment on the .dropdown-wrap wrapping element:

.hpu-text-left
.hpu-text-center
.hpu-text-right

Please refer to HPUCSS Typography for usage info.

HTML


<!-- Left Align (Default) -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="leftMenu">
        Left Aligned
    </button>

    <div class="dropdown-wrap">
        ...
    </button>
</div>

<!-- Centered -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="centerMenu">
        Centered
    </button>

    <div class="dropdown-wrap hpu-text-center">
        ...
    </button>
</div>

<!-- Right Align -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="rightMenu">
        Right Aligned
    </button>

    <div class="dropdown-wrap hpu-text-right">
        ...
    </button>
</div>

Navbar Dropdown

Hidden options on a navbar link. Please refer to HPUCSS Navbar for more usage info.

NOTE: The example below uses responsive text alignment for the dropdown. Centered on lg and up, and left-aligned on md and down.

HTML


<nav class="hpu-nav nav-bg-1st" aria-label="Teal Navbar">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                <a href="..." class="nav-logo">
                    <img src="..." width="150">
                </a>

                <button type="button" class="nav-toggler" aria-expanded="false" aria-controls="navMenu1">
                    <span class="nav-toggler-icon"></span>
                </button>
            </div>

            <ul class="nav-list hover-fade" id="navMenu1" role="menu">
                <li class="nav-item" role="none">
                    <a href="..." class="nav-link hpu-text-uppercase" role="menuitem" aria-current="page">Home</a>
                </li>

                <li class="nav-item hpu-dropdown" aria-expanded="false" data-hpu="dropdown" role="none">
                    <a href="..." class="nav-link dropdown-toggle hpu-text-uppercase" aria-haspopup="true" aria-expanded="false" aria-controls="navSubMenu1" role="menuitem">
                        Academics
                    </a>

                    <div class="dropdown-wrap hpu-text-center-lg">
                        <ul class="dropdown-content" id="navSubMenu1" role="menu">
                            <li class="dropdown-item">
                                <a href="..." class="dropdown-link" role="menuitem" tabindex="0">
                                    Colleges
                                </a>
                            </li>

                            ...
                        </ul>
                    </div>
                </li>

                <li class="nav-item hpu-dropdown" aria-expanded="false" data-hpu="dropdown" role="none">
                    <a href="..." class="nav-link dropdown-toggle hpu-text-uppercase" aria-haspopup="true" aria-expanded="false" aria-controls="navSubMenu2" role="menuitem">
                        Services
                    </a>

                    <div class="dropdown-wrap hpu-text-center-lg">
                        <ul class="dropdown-content" id="navSubMenu2" role="menu">
                            <li class="dropdown-item">
                                <a href="..." class="dropdown-link" role="menuitem" tabindex="0">
                                    Web Development
                                </a>
                            </li>

                            ...
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Dropdown Accessibility

You may have noticed that dropdown components include numerous aria-*, role and the tabindex attributes. These are essential for users who rely on assistive technologies, so please ensure that you consistently include these accessibility attributes in your implementations.

Additionally, well-built dropdowns support multiple methods of interaction. Try the following actions in the example below:

Open the dropdown and press the Escape key to close it.
Use the Tab key to move through the links within the opened dropdown.
Click anywhere outside the dropdown to dismiss it.

These interactions help ensure a more accessible and user-friendly experience for all users. They are already pre-applied, so there is no need to make changes to these behaviors.

HTML


<!-- Centered -->
<div class="hpu-dropdown" aria-expanded="false" data-hpu="dropdown">
    <button class="hpu-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="actnDemoMenu">
        Drop This
    </button>

    <div class="dropdown-wrap hpu-text-center">
        ...
    </button>
</div>