Popover menu

BETA

Component demo

Interactive example

Web component

React

<ic-button
id="button-1"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
slot="icon"
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
slot="icon"
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"/>
</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
Property open Attribute open	If`true` , the popover menu will be displayed. type: boolean	undefined
Property submenuId Attribute submenu-id	The unique identifier for a popover submenu. type: string

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

Property

open

Attribute

open

Iftrue , the popover menu will be displayed.

type: boolean

Default: undefined

Property

submenuId

Attribute

submenu-id

The unique identifier for a popover submenu.

type: string

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 description Attribute description	The description displayed in the menu item, below the label. type: string
Property disabled Attribute disabled	If`true` , the menu item will be in disabled state. type: boolean	false
Property href Attribute href	The URL that the link points to. This will render the menu item as an "a" tag. type: string
Property hreflang Attribute hreflang	The human language of the linked URL. type: string
Property keyboardShortcut Attribute keyboard-shortcut	The label describing the keyboard shortcut for a menu item's action. type: string
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"
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string
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
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
Property toggleChecked Attribute toggle-checked	If`true` , the menu item will be in a checked state. This is only applicable when variant is set to`toggle` . type: boolean	false
Property variant Attribute variant	The variant of the menu item. type: IcMenuItemVariants - "default" \| "destructive" \| "toggle"	"default"

Property

label

Attribute

label

The label to display in the menu item.

Required

type: string

Property

description

Attribute

description

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

type: string

Property

disabled

Attribute

disabled

Iftrue , the menu item will be in disabled state.

type: boolean

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

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string

Property

keyboardShortcut

Attribute

keyboard-shortcut

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

type: string

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

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

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

Property

toggleChecked

Attribute

toggle-checked

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

type: boolean

Default: false

Property

variant

Attribute

variant

The variant of the menu item.

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

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

Property

label

Attribute

label

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

type: string

Variants

With button variations

Interactive example

Web component

React

<ic-button
id="button-2"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
slot="icon"
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="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}
>
<SlottedSVG
slot="icon"
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"/>
</SlottedSVG>
</IcButton>
<IcPopoverMenuanchor="button-2"aria-label="popover"open={popoverOpen}onIcPopoverClosed={handlePopoverClosed}>
<IcMenuItemlabel="Copy"disabled/>
<IcMenuItemlabel="Paste"keyboardShortcut="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

<ic-button
id="button-3"
variant="icon"
title="More information"
onclick="handleClick()"
aria-expanded="false"
>
<svg
slot="icon"
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="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}
>
<SlottedSVG
slot="icon"
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"/>
</SlottedSVG>
</IcButton>
<IcPopoverMenuanchor="button-3"aria-label="popover"open={popoverOpen}onIcPopoverClosed={handlePopoverClosed}>
<IcMenuGrouplabel="Edit options">
<IcMenuItemlabel="Copy"disabled/>
<IcMenuItemlabel="Paste"keyboardShortcut="Cmd + V"/>
</IcMenuGroup>
<IcMenuGroup>
<IcMenuItemlabel="Format"/>
<IcMenuItemlabel="Help"/>
</IcMenuGroup>
</IcPopoverMenu>

Last reviewed 31 May 2024 .

Intelligence Community Design System

Popover menu

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