Menu
I have been trying to remove the caret from the NavDropdown component with bootstrap 4 and react, however I have had no luck. This is my react and css, not sure what's going wrong. Thanks.
<Navbar expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="ENGAGEMENT" id="basic-nav-dropdown" show={false} className="noCaret">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
.caret {
display: none !important;
}
.navbar .dropdown-menu:after{
display:none !important;
}
.dropdown-toggle.noCaret:after {
display: none !important;
960
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.
We can use the following approach in ReactJS to use the react-bootstrap Dropdown Component. Dropdown Props: alignRight: It is used to align the menu to the right side of the Dropdown toggle. as: It can be used as a custom element type for this component.
Every Bootstrap dropdown button or link has an ::after selector in CSS. ::after selector is often used to insert some text after the content of the element. In this case, the content is a dropdown arrow. To remove it, just make the content go 'none'.
You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.
The basic Dropdown is composed of a wrapping Dropdown and inner <DropdownMenu>, and <DropdownToggle>. By default the <DropdownToggle> will render a Button component and accepts all the same props. Since the above is such a common configuration react-bootstrap provides the <DropdownButton> component to help reduce typing.
In Bootstrap 4 you can remove caret form dropdown button by setting $enable-caret sass variable false. But you must set this variable before importing the bootstrap sass file. // Your variable overrides $enable-caret: false // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap";
It's done in css. Do something like that: You may need an !important at the end of that declaration depending on your load order. You can remove the caret in Bootstrap 4 by removing the dropdown-toggle class from your element. So instead of this: This won't have any side affects and it will still function properly as a dropdown.
We do implement some basic keyboard navigation, and if you do provide the "menu" role, react-bootstrap will do its best to ensure the focus management is compliant with the ARIA authoring guidelines for menus. The basic Dropdown is composed of a wrapping Dropdown and inner <DropdownMenu>, and <DropdownToggle>.
You can disable the caret by using id as well
#dropdown-basic::after{
display: none;
}
This works for me, using default bootstrap classes.
.dropdown-toggle::after {
display: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
