Open In App

Bootstrap 5 Dropdowns Menu content

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap Dropdowns are one of the most important parts of an interactive website. A drop-down menu is a collection of menu items that allow users to choose a value from the list. The .dropdown class is used to design the drop-down menu. The Dropdowns menu content is subdivided into Headers, Dividers, Text, and forms.

Brief Description of Sub-topics:

  • Headers: The dropdown header is used to add a header inside the dropdown menu.
  • Dividers: The dropdown divider is used to separate links inside the dropdown menu with a thin horizontal border. 
  • Texts: The dropdown text is used to add plain text inside the dropdown menu.
  • Forms: The Dropdown Menu Form is an element to collect input data containing interactive controls. Put a form within a dropdown menu to make it into a dropdown menu. It provides facilities to input text, numbers, values, email, password, and control fields such as checkboxes, radio buttons, submit buttons, etc.

Example 1: The following example demonstrates the use of dropdown menu content in Bootstrap.

HTML




<!doctype html>
<html lang="en">
 
<head>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
 
<body class="p-3 m-0 border-0 bd-example text-center">
    <h2 class="text-success">
        GeeksforGeeks
    </h2>
 
    <h3>Learning Dropdown Menu Content</h3>
 
    <div class="dropdown">
        <button type="button"
            class="btn btn-warning"
            data-bs-toggle="dropdown"
            aria-expanded="false">
            DropDown Header
        </button>
 
        <ul class="dropdown-menu bg-info">
            <li>
                <h2 class="dropdown-header text-dark">
                    This is header
                </h2>
            </li>
            <li><a class="dropdown-item" href="#">
                Home
            </a></li>
            <li><a class="dropdown-item" href="#">
                Profile
            </a></li>
            <li><a class="dropdown-item" href="#">
                Contact
            </a></li>
            <li><a class="dropdown-item" href="#">
                About us
            </a></li>
        </ul>
    </div>
</body>
 
</html>


Output:

Learning Dropdown Menu content

Example 2: The following example demonstrates the use of dropdown menu content in bootstrap.

HTML




<!doctype html>
<html lang="en">
 
<head>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
 
<body class="p-3 m-0 border-0 bd-example text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
     
    <div class="dropdown">
        <button type="button" c
            lass="btn btn-primary"
            data-bs-toggle="dropdown"
            aria-expanded="false">
            Click me
        </button>
 
        <ul class="dropdown-menu">
            <li><a class="dropdown-item"
                href="#">Home</a></li>
            <li><a class="dropdown-item"
                href="#">Profile</a></li>
            <li><a class="dropdown-item"
                href="#">Contact us</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item-text"
                href="https://www.geeksforgeeks.org/">
                GeeksforGeeks</a>
            </li>
        </ul>
    </div>
    <h3>
        Here we are learning
        content menu Dividers
    </h3>
</body>
 
</html>


Output:

Dropdown content menu dividers

Reference: https://getbootstrap.com/docs/5.2/components/dropdowns/#menu-content



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads