Building a scrollable dropdown menu with Bootstrap 5: A step-by-step guide

The search for suitable code examples for scrollable dropdown menus compatible with Bootstrap 5 has been challenging. Are there any contemporary methods available to achieve this functionality seamlessly?

Answer №1

Are you referring to setting a specific 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

If you're looking for a scrollable dropdown solution, consider using the following CSS code. By setting max-height: 100vh, the dropdown will be limited to 100% of the viewport's height, ensuring it displays nicely on any screen.

Remember to account for the header height by adjusting calc(100vh - 150px). In this example, the header on my site is 150px tall, but you should replace this value with the height of your own header to prevent overlap with the dropdown.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with website header disappearing

I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...

Encountering an Error with JsonRpcProvider while deploying a contract or attempting to run a node

An error has occurred: Error: ERROR processing skip func of /home/dylan/hh-fcc/hardhat-smartcontract-lottery-fcc/deploy/00-deploy-mocks.js: TypeError: Cannot read properties of undefined (reading 'JsonRpcProvider') While following the freecodeca ...

updating react state based on filtered redux properties

Just starting out with react & redux and running into some issues with filtering insights (articles, case studies, reports). My goal is to filter by industry, but I'm struggling to update the state with the filtered insights. InsightsPage.js con ...

Leverage Next.js routing in plain JavaScript without relying on React hooks

I am working on a NextJS app and I need to implement a function that can redirect to any page using Next.js routing. For example, after a user completes the signup process, I want them to be redirected to a specific page. So, I tried creating a reusable ...

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

Although I have some experience with Java Script, I still consider myself a beginner in certain areas, particularly when it comes to accessing JSON objects and arrays. I've tried various syntax and options for accessing arrays using [], but so far, I ...

What is the process for inserting a scroll bar within a div element?

   I have recently created a webpage using some divs, along with a bit of CSS and JavaScript. I am struggling to figure out how to add a scrollbar to one of my divs. The code is not overly complex, as it includes both CSS and JavaScript. <html> & ...

How can you center a div at the top of another div?

I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

A guide to utilizing asynchandler within a class in Node.js

I'm currently in the process of converting my routers into a class structure, but I'm facing a challenge when trying to wrap the asyncHandler function inside the class. Can anyone provide guidance on how to achieve this? userController.js const ...

Looking to create cascading dropdown options

I am working on a form that includes 3 dropdowns with the same options listed below: <select id="one"> <option value="1">Select</option> <option value="1">One</option> <option value="2">Two</option> <option val ...

What is causing the sorting table to fail in React when using useState?

import React, { useState } from "react"; import "./App.css"; const App = () => { const [data, setData] = useState([ { rank: 1, name: "John", age: 29, job: "Web developer", }, { rank: 2, name: "Micha ...

Is it necessary to have both variables present in an if statement for it to be evaluated?

In an attempt to determine if a custom Date widget in JavaScript is empty or not, the following function is created. The challenge lies in the fact that there are multiple variations of this widget - some display M/D/Y fields, while others may only show M/ ...

Searching for a way to sort out role-specific usernames in a dropdown menu using AngularJS?

Is there a way to effectively filter usernames based on specific roles in a dropdown using AngularJS? Hello, I am trying to filter the usernames with the 'KP' role in the dropdown list. Please refer to My plunker for more information. Init ...

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

Issues persist with $.getJSON

I apologize if this question has been addressed previously, but I couldn't find the answer I was seeking. My issue involves using $.getJSON to send variables to a PHP file. Although the file returns success as true, it always triggers the .fail functi ...

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...

Struggling with uploading files in AngularJS?

Below is the code snippet from my controller file where I aim to retrieve the values of various input elements (name, price, date, image) and store them in an array of objects... $scope.addBook = function(name, price, date, image) { name = $scope ...

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Why is it that my Get request works on occasion, but most of the time it returns a 404 error? I've been experimenting by removing the "next()" function, but it doesn't make a difference. I've also tried placing "res.json(req.user.firstName) ...