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.
CSS Styling React Components
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.
< 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.
< 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.
< 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.
< 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>
© 2021 Gumgum, Inc.
