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
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionDemoPopover"
>
    <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"
            style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)"
        >
            <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>

<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.getElementById("actionDemoPopover"))

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

Demo 2: Use Menu Items of Blue Web and Details

HTML Details will be used for the dropdown menu. Event handler in actions.ts automatically closes the Menu when clicking outside.

Code 
<div
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionDemoDetails"
>
    <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>

    <details class="BLUE-actions-collapse blue-collapse">
        <summary class="blue-collapse-header blue-menu-item btn px-3">
            <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
            <span class="visually-hidden">Toggle menu</span>
        </summary>

        <div
            class="BLUE-actions-collapse-menu blue-menu-item-dropdown text-body end-0"
            style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)"
        >
            <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>
    </details>
</div>

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

<script>
    window.actionDemoDetailsResponse = null
    document.addEventListener("DOMContentLoaded", () => {
        actionDemoDetailsResponse = blueWeb.actions.init(document.getElementById("actionDemoDetails"))

        actionDemoDetailsRange.addEventListener("input", ({ target }) => {
            actionDemoDetails.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.actionsDemoMenuItemsResponse.destroy()
    })
</script>

Demo 2: Use Bootstrap Button Groups

Code 
<div
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionsDemoButtonGroups"
>
    <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>

    <details class="BLUE-actions-collapse blue-collapse">
        <summary class="blue-collapse-header blue-menu-item btn px-3">
            <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
            <span class="visually-hidden">Toggle menu</span>
        </summary>

        <div class="BLUE-actions-collapse-menu d-flex flex-column end-0">
            <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>
    </details>
</div>

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

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

        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.css
  2. Copy and paste the following code into your project. Source: @/src/js/actions.ts
Edit post on GitHub