How do I make an accessible dropdown that opens on hover but still works with keyboard?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I make an accessible dropdown that opens on hover but still works with keyboard?

Asked on May 17, 2025

Answer

To create an accessible dropdown in Bootstrap 5 that opens on hover and remains functional with keyboard navigation, you can use a combination of Bootstrap's dropdown components and some custom CSS for hover behavior.

<!-- BEGIN COPY / PASTE -->
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>

        <style>
            .dropdown:hover .dropdown-menu {
                display: block;
            }
        </style>
        <!-- END COPY / PASTE -->

Additional Comment:

The button element is used to toggle the dropdown, ensuring it is accessible via keyboard.
The `aria-expanded` attribute is used to indicate the dropdown's state.
The custom CSS rule `.dropdown:hover .dropdown-menu` ensures the dropdown opens on hover.
Ensure that the dropdown remains accessible by testing with both mouse and keyboard navigation.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I make an accessible dropdown that opens on hover but still works with keyboard?

Asked on May 17, 2025

Answer

The Q&A Network