Add a glass effect to dropdowns

[José Pablo Ramírez Vargas]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Achieving a glass effect is very simple nowadays: Apply a blur effect and an optional saturate effect on a block element's backdrop and that has a semi-transparent background.

The "hard" part for us consumers of unmodified Bootstrap or already-modified Bootstrap (for instance, my company has a customized version that I'm not supposed to touch) is setting the partial opacity in the background color. My limited knowledge tells me that this should be defined early in the Bootstrap-building process where the RGB or HSL values are available.

My proposal would be for Bootstrap to provide at least the dropdown-menu-glass CSS class that switches to the semi-transparent background color (whichever that is, including the ones set using bg-<variant>) and applies the backdrop-filter CSS attribute. The blur radius and saturation percentage would come from data-bs- attributes, or perhaps overridable CSS variables that us consumers and component library creators can define in, say DIV elements with its display CSS attribute set to contents.

Using data attributes:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle">Show Menu</button>
    <ul class="dropdown-menu dropdown-menu-glass"  data-bs-glass-blur="1.5em" data-bs-glass-saturation="170%">
        ...
    </ul>
</div>

Using CSS variables:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle">Show Menu</button>
    <div class="d-contents my-glass-settings">
        <ul class="dropdown-menu dropdown-menu-glass">
            ...
        </ul>
    </div>
</div>

<style>
    .my-glass-settings {
        --bs-glass-blur: 1.5em;
        --bs-glass-saturation: 170%;
    }
</style>

NOTE: The d-contents helper class doesn't exist in Bootstrap, so it would have to be defined.

I am no expert in Bootstrap, so unsure if interjecting the DIV.d-contents HTML element disrupts the dropdown CSS mechanisms.

Motivation and context

While this might be possible for Bootstrap experts to achieve, us mainstream developers would have a very hard time achieving this glass effect in a way that is fully compliant with all other Bootstrap features like the text-bg-* and bg-* classes, or any other background color-related features in this comprehensive CSS library.

[Christopher Morrissey]

I would probably do something like this ...

:root {
  --bs-bg-opacity: 0.8;

  --bs-bg-glass-blur: 1.5em;
  --bs-bg-glass-saturation: 170%;
}

.bg-glass {
   backdrop-filter: blur(var(--bs-bg-glass-blur, 1.5em)) saturate(var(--bs-bg-glass-saturation, 170%));
}

.dropdown-menu {
  --bs-dropdown-bg: rgba(var(--bs-body-bg), var(--bs-bg-opacity, 1));
}

this will work with most of the main bg classes

<div class="bg-primary bg-glass"></div>

and here with the dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu bg-glass">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

i don't think adding them in as data variables is needed you just attach a style to the element that way you don't need any js.

[José Pablo Ramírez Vargas]

Thanks, @morrissey-ingenious for dropping by and your suggestion. Indeed, the information piece I missed was the fact that the color opacity can be worked out via the CSS variable. This makes the implementation easier for sure. My sincere gratitude.

I'll leave the decision of closing this to you: Maybe glass is a cool thing Bootstrap would like to have? If not, close the request.

[Julien Déramond]

IMHO, this would be too specific to add to Bootstrap as it could be done from "outside". I would add that glass effect can probably also be tricky on the a11y side.

Assigning this feature request to @mdo for a design point of view and final word.