How to remove the arrow in dropdown in Bootstrap?
A drop-down is like a list box that shows only one item when inactive. When we click on it, it shows the full list. Bootstrap provides one such component called Bootstrap dropdown.
It is toggleable and has a predefined list of items that can be selected on clicking.
Creating a dropdown in Bootstrap
To create a dropdown, add the .dropdown class in your code and then use .dropdown-toggle and .data-toggle="dropdown" properties with <button> element before dropdown-menu class.
- Include .dropdown-menu class under <div> tag to create dropdown menu.
- To add items in the dropdown menu, use .dropdown-item class inside <a> element.
Here is an example of creating a dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</body>
</html>
Output:
Here is the output of the above program. As you can see the dropdown button has a text and an arrow symbol within.
Removing the arrow from the dropdown in Bootstrap
To remove the arrow from the dropdown you just need to remove the .dropdown-toggle class from the <button> element in the code. The rest of the code remains the same. We will see that now the dropdown has no arrow within it.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary " type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</body>
</html>
Output
Here is the output of the above program. You can see that there is no arrow on the dropdown button.
Conclusion
So, we can successfully remove the arrow from the dropdown button by removing the .data-toggle class from the button.
