bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Arrow Indicator for Dropdown Menus

Open coliff opened this issue 2 years ago • 2 comments

Prerequisites

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:

image

coliff avatar Sep 26 '22 07:09 coliff

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

WinterSilence avatar Oct 11 '22 06:10 WinterSilence

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)

thecristen avatar Apr 02 '24 19:04 thecristen