Arrow Indicator for Dropdown Menus

coliff commented 1 year ago

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:

WinterSilence commented 1 year ago

i.e. add transition for dropdown caret as in accordion

thecristen commented 5 months ago

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)

twbs / bootstrap