Actions

Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space. Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.

Demo 1: Use Menu Items of Blue Web and Dropdown with Popover and Anchor Positioning

Code 
<div style="width: 460px" class="border" id="actionDemoPopover">
    <div class="BLUE-actions" role="toolbar" aria-label="Toolbar with button groups">
        <div class="BLUE-actions-menu">
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
                <span class="blue-menu-item-label">Child</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
                <span class="blue-menu-item-label">Child 2</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
                <span class="blue-menu-item-label">Child 3</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
                <span class="blue-menu-item-label">Child 4</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
                <span class="blue-menu-item-label">Child 5</span>
            </button>
        </div>

        <div class="BLUE-actions-collapse" style="--blue-anchor-name: --actionDemoPopoverAnchor">
            <button type="button" popovertarget="actionDemoPopoverPopover" class="blue-anchor blue-menu-item btn px-3">
                <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
                <span class="visually-hidden">Toggle menu</span>
            </button>

            <div
                id="actionDemoPopoverPopover"
                popover
                class="BLUE-actions-collapse-menu blue-anchored blue-anchored-end blue-anchored-fallback blue-menu-item-dropdown text-body gap-1 flex-column p-1"
                style="--blue-menu-item-dropdown-bg: var(--bs-body-bg); --display: flex;"
            >
                <button type="button" class="blue-menu-item btn">
                    <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
                    <span class="blue-menu-item-label">Child</span>
                </button>
                <button type="button" class="blue-menu-item btn">
                    <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
                    <span class="blue-menu-item-label">Child 2</span>
                </button>
                <button type="button" class="blue-menu-item btn">
                    <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
                    <span class="blue-menu-item-label">Child 3</span>
                </button>
                <button type="button" class="blue-menu-item btn">
                    <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
                    <span class="blue-menu-item-label">Child 4</span>
                </button>
                <button type="button" class="blue-menu-item btn">
                    <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
                    <span class="blue-menu-item-label">Child 5</span>
                </button>
            </div>
        </div>
    </div>
</div>

<label
    >Change container width
    <input id="actionDemoPopoverRange" type="range" min="50" max="1200" value="460" />
</label>

<script>
    window.actionDemoPopoverResponse = null
    document.addEventListener("DOMContentLoaded", () => {
        actionDemoPopoverResponse = blueWeb.actions.init(document.querySelector("#actionDemoPopover .BLUE-actions"))

        actionDemoPopoverRange.addEventListener("input", ({ target }) => {
            actionDemoPopover.style.width = `${target.value}px`
        })
    })
</script>

The JavaScript function init returns an object with the function destroy(). When you execute it, the ResizeObserver will be disconnected and global event listeners will be removed. Try to click the button. It will destroy the actions from above.

Code 
<button id="destroyActionsDemoMenuItems" type="button" class="btn blue-btn-soft-danger">Destroy</button>
<script>
    destroyActionsDemoMenuItems.addEventListener("click", () => {
        window.actionDemoPopoverResponse.destroy()
    })
</script>

Demo 2: Use Bootstrap Button Groups

Code 
<div id="actionsDemoButtonGroups" class="border p-1" style="width: 460px">
    <div class="BLUE-actions" role="toolbar" aria-label="Toolbar with button groups">
        <div class="BLUE-actions-menu gap-2">
            <div class="btn-group" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="btn-group" role="group" aria-label="Second group">
                <button type="button" class="btn btn-secondary">5</button>
                <button type="button" class="btn btn-secondary">6</button>
                <button type="button" class="btn btn-secondary">7</button>
            </div>
            <div class="btn-group" role="group" aria-label="Third group">
                <button type="button" class="btn btn-info">8</button>
            </div>
            <div class="btn-group" role="group" aria-label="Fourth group">
                <button type="button" class="btn btn-primary">9</button>
                <button type="button" class="btn btn-primary">10</button>
                <button type="button" class="btn btn-primary">11</button>
                <button type="button" class="btn btn-primary">12</button>
            </div>
        </div>

        <div class="BLUE-actions-collapse" style="--blue-anchor-name: --actionsDemoButtonGroupsAnchor">
            <button
                type="button"
                popovertarget="actionsDemoButtonGroupsPopover"
                class="blue-anchor blue-menu-item btn px-3"
            >
                <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
                <span class="visually-hidden">Toggle menu</span>
            </button>

            <div
                id="actionsDemoButtonGroupsPopover"
                popover
                class="BLUE-actions-collapse-menu blue-anchored blue-anchored-end blue-anchored-fallback blue-menu-item-dropdown text-body gap-1 flex-column p-1"
                style="--blue-menu-item-dropdown-bg: var(--bs-body-bg); --display: flex;"
            >
                <div class="btn-group" role="group" aria-label="First group">
                    <button type="button" class="btn btn-primary">1</button>
                    <button type="button" class="btn btn-primary">2</button>
                    <button type="button" class="btn btn-primary">3</button>
                    <button type="button" class="btn btn-primary">4</button>
                </div>
                <div class="btn-group" role="group" aria-label="Second group">
                    <button type="button" class="btn btn-secondary">5</button>
                    <button type="button" class="btn btn-secondary">6</button>
                    <button type="button" class="btn btn-secondary">7</button>
                </div>
                <div class="btn-group" role="group" aria-label="Third group">
                    <button type="button" class="btn btn-info">8</button>
                </div>
                <div class="btn-group" role="group" aria-label="Fourth group">
                    <button type="button" class="btn btn-primary">9</button>
                    <button type="button" class="btn btn-primary">10</button>
                    <button type="button" class="btn btn-primary">11</button>
                    <button type="button" class="btn btn-primary">12</button>
                </div>
            </div>
        </div>
    </div>
</div>

<label
    >Change container width
    <input id="actionsDemoButtonGroupsRange" type="range" min="50" max="1200" value="460" />
</label>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        blueWeb.actions.init(document.querySelector("#actionsDemoButtonGroups .BLUE-actions"))

        actionsDemoButtonGroupsRange.addEventListener("input", ({ target }) => {
            actionsDemoButtonGroups.style.width = `${target.value}px`
        })
    })
</script>

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.

  1. Copy and paste the following code into your project. Source: @/dist/styles/_actions.scss
  2. Copy and paste the following code into your project. Source: @/src/js/actions.ts
Edit post on GitHub