NgbDropdown: remove dropdown arrow
Solution 1
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after
pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after
pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle
class. Let's go and change the properties of the element! For this purpose we are changing the display
property to none
:
The pseudo-element is no longer there!!:
Solution 2
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
Solution 3
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret
SASS variable and setting it to false
:
$enable-caret: false;
This overrides the default value of true
set in the Bootstrap's _variable.scss
:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
Comments
-
JP4 almost 2 years
I'm using the
NgbDropdown
component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown"> <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <button class="dropdown-item">Action - 1</button> <button class="dropdown-item">Another Action</button> <button class="dropdown-item">Something else is here</button> </div> </div>