How to make a scrollable dropdown menu in bootstrap 5?

Question

I've seen some great code examples for dropdown menus you can scroll through but sadly most don't work with bootstrap 5. Is there any modern way to do this?

Answer 1

Do you mean a fixed height for the menu?

HTML:

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click on Me
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</div>

CSS:

.dropdown-menu {
  max-height: 100px;
  overflow-y: scroll;
}

Answer 2

You can try below css for scrollable dropdown. Here You can set max-height: 100vh which limits it to 100% of the viewport's height. So, It will show in any viewport nicely.

Don't forget to minus header height from calc(100vh - 150px). 150px is the height of the header on my site example. You can replace as per your site. which is above the height of the dropdown.

.dropdown-menu {
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 150px);
}