Open In App

Bootstrap 5 Dropdowns Menu Content Dividers

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Dropdowns Menu content Dividers Separate groups of related menu items with a divider. It is like a straight line that divides the drop-down options.

Dropdowns Menu content Dividers Class:

  • dropdown-divider:  This class is used for creating a dropdown divider.

Syntax:

<ul class="dropdown-menu">
   <li><hr class="dropdown-divider"></li>
   ...
</ul>

Example 1: In this example, we will learn about menu content dividers

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Menu content Dividers</h2>
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" 
                    type="button" data-bs-toggle="dropdown">
                Living and NonLiving things
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="#">
                        Pencil
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Erazer
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Sharpener
                    </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Human Beings
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Plants
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Animals
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will add some styling to the divider. We will increase its thickness and color.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Menu content Dividers</h2>
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" 
                    type="button"  data-bs-toggle="dropdown" >
                Living and NonLiving things
            </button>
            <ul class="dropdown-menu" >
                <li>
                    <a class="dropdown-item" href="#">
                        Pencil
                    </a>
                 </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Erazer
                    </a>
                 </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Sharpener
                    </a>
                 </li>
                <li>
                    <hr class="dropdown-divider 
                        text-success p-2">
                 </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Human Beings
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Plants
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Animals
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dividers



Last Updated : 23 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads