bootstrap
bootstrap copied to clipboard
Arrow Indicator for Dropdown Menus
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the contributing guidelines
Proposal
The dropdown menus in Bootstrap don't display an arrow indicator when expanded, but these would be very helpful for some types on menus, particularly in situations where you have a several icon buttons (with no text) on a navbar - each with a dropdown so when a dropdown is expanded it's not immediately clear visually which one is activated.
I imagine the arrow would be styled like the popover arrows and it'd be opt-in via adding a modifier class to the dropdown menu..
Motivation and context
GitHub (and many other sites) makes use of these:
i.e. add transition for dropdown caret as in accordion
Anyone looking for a quick patch, this CSS flips the caret around when the menu is expanded:
.dropdown-toggle[aria-expanded="true"]::after {
transform: scale(-1, -1);
}
(use ::before
if using the dropstart variant)