Bootstrap 5 Dropdowns Disabled

Last Updated : 17 Jan, 2023

Bootstrap 5 Dropdowns Disabled is used to disable some text items in the dropdown. A disabled drop-down list is unusable and un-clickable.

Bootstrap 5 Dropdowns Disabled classes: There is no specific class for the Bootstrap 5 Dropdowns disabled feature, we need to add a combination of Bootstrap5 Dropdown classes.

Bootstrap 5 Dropdowns Disabled Attribute:

disabled: This attribute is used to make the dropdown disabled.

Syntax:

<div class="dropdown" ...>
    <button class="btn dropdown-toggle" 
                  type="button" 
                  data-bs-toggle="dropdown">
        ....
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">...</a></li>
        <li><a class="dropdown-item disabled"..>...</a></li>
        ....
    </ul>
    ...
</div>

Example 1: In this example, we set buttons using btn class, the button turned into a dropdown toggle, and disabled the text item in the dropdown.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body class="m-3">
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Dropdowns Disabled</h5>
    </div>
    <div class="dropdown p-4 border bg-light 
        text-center dropend" style="height:130px;">
        <button class="btn btn-success dropdown-toggle"
            type="button" data-bs-toggle="dropdown">
            Select the city
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">
                Agra</a></li>
            <li><a class="dropdown-item" href="#">
                Rampur</a></li>
            <li><a class="dropdown-item" href="#">
                Praygraj</a></li>
            <li><a class="dropdown-item" href="#">
                kanpur</a></li>
            <li><a class="dropdown-item disabled"
                href="#" tabindex="-1">
                    Delhi
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                Lucknow</a></li>
        </ul>
    </div>
</body>
</html>

Output:

Bootstrap 5 Dropdowns Disabled

Example 2: In this example, we set multiple buttons with a dropdown toggle to show the menu and use disabled class to disable the text in the dropdown.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body class="m-3">
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Dropdowns Disabled</h5>
    </div>
    <div class="p-3 border bg-light text-center"
        style="height:120px;">
        <div class="btn-group dropstart">
            <button type="button" class="btn btn-secondary 
                dropdown-toggle dropdown-toggle-split"
                data-bs-toggle="dropdown">
                <button type="button" class="btn btn-danger">
                    Choose the Phone
                </button>
                <span class="visually-hidden">
                    Toggle Dropdown
                </span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">
                    Redmi</a></li>
                <li><a class="dropdown-item" href="#"
                    >Realme</a></li>
                <li><a class="dropdown-item" href="#">
                    Samsung A1</a></li>
                <li><a class="dropdown-item disabled"
                    href="#" tabindex="-2">
                    Iphone 12</a></li>
                <li><a class="dropdown-item" href="#">
                    Motorola G2</a></li>
                <li><a class="dropdown-item disabled" href="#"
                    tabindex="-2">
                    Vivo T1</a></li>
            </ul>
        </div>
        <div class="btn-group dropend">
            <button type="button" class="btn btn-primary">
                Choose the Company
            </button>
            <button type="button" class="btn btn-success 
                dropdown-toggle dropdown-toggle-split"
                data-bs-toggle="dropdown">
                <span class="visually-hidden">
                    Toggle Dropdown
                </span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">
                    Amazon</a></li>
                <li><a class="dropdown-item" href="#">
                    GeeksforGeeks</a></li>
                <li><a class="dropdown-item disabled"
                    href="#" tabindex="-3">
                    Reliance JIO</a></li>
                <li><a class="dropdown-item" href="#">
                    Tesla</a></li>
                <li><a class="dropdown-item disabled"
                    href="#" tabindex="-3">Messo</a></li>
                <li><a class="dropdown-item" href="#">
                    Tata Motors</a></li>
            </ul>
        </div>
    </div>
</body>
 
</html>