How can I make dropdown menus scrollable with fixed height?

Asked on Aug 29, 2025

1 Answer

To make dropdown menus scrollable with a fixed height in Bootstrap 5, you can use the `max-height` property along with `overflow-y: auto` to enable scrolling. Here's a simple example:

<!-- 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" style="max-height: 200px; overflow-y: auto;">
                <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>
                <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>
                <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>
        <!-- END COPY / PASTE -->

Additional Comment:

The `style` attribute on the `
- Adjust `max-height` to your desired value.
- Ensure that the dropdown has enough items to require scrolling.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions