Open In App

Bootstrap 5 Dropdowns Menu content

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
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>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        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:

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

HTML
<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        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:

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


Next Article

Similar Reads