Bubble Menu

Last updated: 9/17/21

Bubble Menus are nested menus that display a list of choices or links when it's parent element is interacted with.

Base

Use the base class pier-bubble-menu that wraps many elements with the class pier-bubble-menu__label or pier-bubble-menu__item. Use the modifier class pier-bubble-menu--open to reveal the Bubble Menu.

HTML markup

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div class="pier-bubble-menu pier-bubble-menu--open">
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div class="pier-bubble-menu pier-bubble-menu--open">
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

Sizes

Use the modifier classes pier-bubble-menu--sm, pier-bubble-menu--md, or pier-bubble-menu--lg to change the size of the Bubble Menu.

HTML markup

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--sm">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--sm pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--md">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--md pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--lg">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--lg pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--sm">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--sm pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--md">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--md pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--lg">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="pier-bubble-menu pier-bubble-menu--lg pier-bubble-menu--open"
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

Position

Use the modifier classes pier-bubble-menu--top-left, pier-bubble-menu--bottom-left, pier-bubble-menu--top-right, or pier-bubble-menu--bottom-right to change the position of the Bubble Menu.

HTML markup

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--top-left
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--top-right
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--bottom-left
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--bottom-right
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--top-left
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--top-right
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--bottom-left
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>
<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu
                pier-bubble-menu--bottom-right
                pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

Dark

Use the modifier class pier-bubble-menu--dark to change the style of the Bubble Menu for dark UI themes.

HTML markup

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--dark">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu pier-bubble-menu--dark pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

<div
    class="-d-flex -justify-content-center -align-items-center"
    style="height:600px"
>
    <div>
        <button class="pier-button-icon pier-button-icon--dark">
            <i class="fas fa-pen pier-button-icon__icon"></i>
        </button>
        <div
            class="
                pier-bubble-menu pier-bubble-menu--dark pier-bubble-menu--open
            "
        >
            <div class="pier-bubble-menu__label">Alerts</div>
            <div class="pier-bubble-menu__item">Alert 1</div>
            <div class="pier-bubble-menu__item">Alert 2</div>
            <div class="pier-bubble-menu__item">Alert 3</div>
            <div class="pier-bubble-menu__item pier-bubble-menu__item--divider">
                Clear Alerts
            </div>
        </div>
    </div>
</div>

Pier Design System

Bubble Menu

Base

HTML markup

Sizes

HTML markup

Position

HTML markup

Dark

HTML markup