Popover menu

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-button
id="button-1"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<div>
<ic-popover-menuanchor="button-1"aria-label="popover"id="popover-menu">
<ic-menu-itemlabel="Copy code"></ic-menu-item>
<ic-menu-itemlabel="Paste code"></ic-menu-item>
<ic-menu-item
label="Actions"
submenu-trigger-for="actions"
></ic-menu-item>
</ic-popover-menu>
<ic-popover-menusubmenu-id="actions">
<ic-menu-itemlabel="Edit"></ic-menu-item>
<ic-menu-itemlabel="Find"></ic-menu-item>
<ic-menu-itemlabel="Delete"variant="destructive"></ic-menu-item>
</ic-popover-menu>
</div>

<IcButton
variant="icon"
title="More information"
id="button-1"
onClick={handlePopoverToggled}
aria-expanded={popoverOpen}
>
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</SlottedSVG>
</IcButton>
<IcPopoverMenuanchor="button-1"aria-label="popover"open={popoverOpen}onIcPopoverClosed={handlePopoverClosed}>
<IcMenuItemlabel="Copy code"/>
<IcMenuItemlabel="Paste code"/>
<IcMenuItemlabel="Actions"submenuTriggerFor="actions"/>
</IcPopoverMenu>
<IcPopoverMenusubmenuId="actions"aria-label="popover">
<IcMenuItemlabel="Edit"/>
<IcMenuItemlabel="Find"/>
<IcMenuItemlabel="Delete"variant="destructive"/>
</IcPopoverMenu>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property anchor Attribute anchor	The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu. type: string - string \| undefined
Property open Attribute open	If`true` , the popover menu will be displayed. type: boolean \| undefined	undefined
Property submenuId Attribute submenu-id	The unique identifier for a popover submenu. type: string - string \| undefined
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"

Property

anchor

Attribute

anchor

The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.

type: string - string | undefined

Property

open

Attribute

open

Iftrue , the popover menu will be displayed.

type: boolean | undefined

Default: undefined

Property

submenuId

Attribute

submenu-id

The unique identifier for a popover submenu.

type: string - string | undefined

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

CSS Custom Properties

Name	Description
--ic-z-index-popover	z-index of popover menu.
--max-height	Maximum height of the popover menu.
--popover-width	Default width of the popover menu.

--ic-z-index-popover z-index of popover menu.

--max-height Maximum height of the popover menu.

--popover-width Default width of the popover menu.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icPopoverClosed React onIcPopoverClosed	Emitted when the popover menu is closed.	HTMLIcMenuItemElement

Web component

icPopoverClosed

React

onIcPopoverClosed

Emitted when the popover menu is closed.

HTMLIcMenuItemElement

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label to display in the menu item. Required type: string
Property checked Attribute checked	If`true` , the menu item will be in a checked state. This is only applicable when variant is set to`toggle` . type: boolean - boolean \| undefined	false
Property description Attribute description	The description displayed in the menu item, below the label. type: string - string \| undefined
Property disabled Attribute disabled	If`true` , the menu item will be in disabled state. type: boolean - boolean \| undefined	false
Property href Attribute href	The URL that the link points to. This will render the menu item as an "a" tag. type: string - string \| undefined
Property hreflang Attribute hreflang	The human language of the linked URL. type: string - string \| undefined
Property keyboardShortcutLabel Attribute keyboard-shortcut-label	The label describing the keyboard shortcut for a menu item's action. type: string - string \| undefined
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" \| undefined
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string - string \| undefined
Property submenuTriggerFor Attribute submenu-trigger-for	This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default. type: string - string \| undefined
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string - string \| undefined
Property variant Attribute variant	The variant of the menu item. type: IcMenuItemVariants - "default" \| "destructive" \| "toggle" \| undefined	"default"

Property

label

Attribute

label

The label to display in the menu item.

Required

type: string

Property

checked

Attribute

checked

Iftrue , the menu item will be in a checked state. This is only applicable when variant is set totoggle .

type: boolean - boolean | undefined

Default: false

Property

description

Attribute

description

The description displayed in the menu item, below the label.

type: string - string | undefined

Property

disabled

Attribute

disabled

Iftrue , the menu item will be in disabled state.

type: boolean - boolean | undefined

Default: false

Property

href

Attribute

href

The URL that the link points to. This will render the menu item as an "a" tag.

type: string - string | undefined

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string - string | undefined

Property

keyboardShortcutLabel

Attribute

keyboard-shortcut-label

The label describing the keyboard shortcut for a menu item's action.

type: string - string | undefined

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined

Property

submenuTriggerFor

Attribute

submenu-trigger-for

This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.

type: string - string | undefined

Property

target

Attribute

target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined

Property

variant

Attribute

variant

The variant of the menu item.

type: IcMenuItemVariants - "default" | "destructive" | "toggle" | undefined

Default: "default"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot icon	Content will be placed to the left of the menu item label.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icToggleChecked React onIcToggleChecked	Emitted when the user clicks a menu item that is set to the toggle variant.	{ checked: boolean; }

Web component

icToggleChecked

React

onIcToggleChecked

Emitted when the user clicks a menu item that is set to the toggle variant.

{ checked: boolean; }

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label to display as the title of the menu group. type: string - string \| undefined

Property

label

Attribute

label

The label to display as the title of the menu group.

type: string - string | undefined

Variants

With button variations

Interactive example

Web component

React

Show full code

<ic-button
id="button-2"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<div>
<ic-popover-menuanchor="button-2"aria-label="popover"id="popover-menu-2">
<ic-menu-itemlabel="Copy"disabled="true"></ic-menu-item>
<ic-menu-itemlabel="Paste"keyboard-shortcut-label="Cmd + V"></ic-menu-item>
<ic-menu-itemlabel="Edit"description="This is used to edit the original."></ic-menu-item>
<ic-menu-itemlabel="Show/Hide"variant="toggle"></ic-menu-item>
<ic-menu-itemlabel="Find icons">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
</svg>
</ic-menu-item>
<ic-menu-itemlabel="Delete"disabled="true"variant="destructive"></ic-menu-item>
<ic-menu-itemlabel="Log out"variant="destructive"></ic-menu-item>
</ic-popover-menu>
</div>

<IcButton
variant="icon"
title="More information"
id="button-2"
onClick={handlePopoverToggled}
aria-expanded={popoverOpen}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</IcButton>
<IcPopoverMenuanchor="button-2"aria-label="popover"open={popoverOpen}onIcPopoverClosed={handlePopoverClosed}>
<IcMenuItemlabel="Copy"disabled/>
<IcMenuItemlabel="Paste"keyboardShortcutLabel="Cmd + V"/>
<IcMenuItemlabel="Edit"description="This is used to edit the original."/>
<IcMenuItemlabel="Show/Hide"variant="toggle"/>
<IcMenuItemlabel="Find icons">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
</SlottedSVG>
</IcMenuItem>
<IcMenuItemlabel="Delete"disabledvariant="destructive"/>
<IcMenuItemlabel="Log out"variant="destructive"/>
</IcPopoverMenu>

Interactive example

Web component

React

Show full code

<ic-button
id="button-3"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<div>
<ic-popover-menuanchor="button-3"aria-label="popover"id="popover-menu-3">
<ic-menu-grouplabel="Edit options">
<ic-menu-itemlabel="Copy"disabled="true"></ic-menu-item>
<ic-menu-itemlabel="Paste"keyboard-shortcut-label="Cmd + V"></ic-menu-item>
</ic-menu-group>
<ic-menu-group>
<ic-menu-itemlabel="Format"></ic-menu-item>
<ic-menu-itemlabel="Help"></ic-menu-item>
</ic-menu-group>
</ic-popover-menu>
</div>

<IcButton
variant="icon"
title="More information"
id="button-3"
onClick={handlePopoverToggled}
aria-expanded={popoverOpen}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</IcButton>
<IcPopoverMenuanchor="button-3"aria-label="popover"open={popoverOpen}onIcPopoverClosed={handlePopoverClosed}>
<IcMenuGrouplabel="Edit options">
<IcMenuItemlabel="Copy"disabled/>
<IcMenuItemlabel="Paste"keyboardShortcutLabel="Cmd + V"/>
</IcMenuGroup>
<IcMenuGroup>
<IcMenuItemlabel="Format"/>
<IcMenuItemlabel="Help"/>
</IcMenuGroup>
</IcPopoverMenu>

Theme

Interactive example

Web component

React

Show full code

<ic-button
id="button-4"
variant="icon"
title="More information"
onclick="handleClick()"
theme="dark"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<div>
<ic-popover-menutheme="dark"anchor="button-4"aria-label="popover"id="popover-menu">
<ic-menu-itemlabel="Copy code"></ic-menu-item>
<ic-menu-itemlabel="Paste code"></ic-menu-item>
<ic-menu-item
label="Actions"
submenu-trigger-for="actions"
></ic-menu-item>
</ic-popover-menu>
<ic-popover-menusubmenu-id="actions">
<ic-menu-itemlabel="Edit"></ic-menu-item>
<ic-menu-itemlabel="Find"></ic-menu-item>
<ic-menu-itemlabel="Delete"variant="destructive"></ic-menu-item>
</ic-popover-menu>
</div>

<IcButton
variant="icon"
title="More information"
id="button-4"
onClick={handlePopoverToggled}
theme="dark"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-three-dots-vertical"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</IcButton>
<IcPopoverMenu
theme="dark"
anchor="button-4"
aria-label="popover"
open={popoverOpen}
onIcPopoverClosed={handlePopoverClosed}
>
<IcMenuItemlabel="Copy code"/>
<IcMenuItemlabel="Paste code"/>
<IcMenuItemlabel="Actions"submenuTriggerFor="actions"/>
</IcPopoverMenu>
<IcPopoverMenusubmenuId="actions"aria-label="popover">
<IcMenuItemlabel="Edit"/>
<IcMenuItemlabel="Find"/>
<IcMenuItemlabel="Delete"variant="destructive"/>
</IcPopoverMenu>

Last reviewed 31 May 2024 .

Popover menu

Component demo

Interactive example

Popover menu details

Props

CSS Custom Properties

Events

Menu item details

Props

Slots

Events

Menu group details

Props

Variants

With button variations

Interactive example

With menu groups

Interactive example

Theme

Interactive example