Popover • Blue Web

In combination with the Popover API and CSS Anchor Positioning you can create a dropdown menu without the need for custom JavaScript.

Use CSS property position-area to set where the popover should be relative to its anchor. I recommend to use the anchor position tool to find the right value.

Fallback

Add .blue-anchored-fallback to the dropdown element and on not supported browsers, it will be displayed with an overlay over the whole page.

Code

<button type="button" class="btn blue-halo" popovertarget="popover-basic">Open popover</button>

<div
    id="popover-basic"
    popover
    class="blue-anchored-fallback position-fixed m-0 p-3 border rounded shadow"
    style="position-area: bottom span-right"
>
    Hello from popover!
</div>

Anchoring helper classes

.blue-anchor, .blue-anchored and some other classes help you with some common stylings.

Code

<button type="button" class="blue-anchor btn blue-halo" popovertarget="popover-helpers-start">Open to start</button>
<div id="popover-helpers-start" popover class="blue-anchored blue-anchored-start blue-anchored-fallback">
    Hello from popover!
</div>

<button type="button" class="blue-anchor btn blue-halo" popovertarget="popover-helpers-end">Open to end</button>
<div id="popover-helpers-end" popover class="blue-anchored blue-anchored-end blue-anchored-fallback">
    Hello from popover!
</div>

<hr />

<div class="hstack">
    <button type="button" class="blue-anchor btn blue-halo ms-auto" popovertarget="popover-helpers-try">
        Popover will automatically flip inline if not enough space.
    </button>

    <div id="popover-helpers-try" popover class="blue-anchored blue-anchored-fallback" style="width: 500px">
        Hello from popover!
    </div>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/dist/styles/_anchor.scss

Edit post on GitHub