## Feature Examples
### Trigger element
- description: Popover menus are opened by interacting with a trigger element. Common trigger elements are: - [``](#/component/button) - `` - ``
- example:
```jsx
}>
More Actions
}
>
}>More Actions
}
>
}
>
;
```
### Trigger interaction
- description: Popover menus are displayed when a trigger element is either clicked or hovered on.
- example:
```jsx
}>Click Here
}
>
(
}
>
Hover Here
)}
>
;
```
### Size
- description: The size of menu items can be controlled using the `textSize` prop. There are two sizes to choose from: - `medium` is the default used in common cases. - `small` should be used in dense layouts.
- example:
```jsx
}>
View Medium Size
}
>
} size="small">
View Small Size
}
>
;
```
### Skin
- description: The appearance of each menu item can be controlled using the `skin` prop. There are two skins to choose from: - `dark` should be used for all common cases. - `destructive` should be used to highlight destructive and permanent actions, e.g., deleting a contact. _Note_: Destructive actions should be placed last in the menu.
- example:
```jsx
}>View Skins
}
>
;
```
### Disabled
- description: Actions that are unavailable to users at that time should be marked with the `disabled` prop.
- example:
```jsx
}>
View Disabled State
}
>
;
```
### Prefix
- description: Icons can be added to menu items using the `prefixIcon` prop. It can help users identify actions quicker. _Note_: `small` size popovers should use the small icon size, 18x18.
- example:
```jsx
}>View Prefix
}
>
} />
} />
} />
} size="small">
View Small Prefix
}
>
} />
} />
} />
;
```
### Subtitle
- description: Add additional information that helps explain the purpose of a specific action using the `subtitle` prop.
- example:
```jsx
}>View Subtitle
}
>
;
```
### Divider
- description: Menu items can be organized into groups by adding a `` between them.
- example:
```jsx
}>View Divider
}
>
;
```
### Placement
- description: The placement of the menu in relation to the trigger element can be controlled using the `placement` prop. There are four placement types to choose from: - `top`, `top-start`, `top-end` - `right`, `right-start`, `right-end` - `bottom` (default), `bottom-start`, `bottom-end` - `left`, `left-start`, `left-end`
- example:
```jsx
}>
Top Placement
}
>
}>
Left Placement
}
>
}>
Right Placement
}
>
}>
Bottom Placement
}
>
;
```
### Pointer arrow
- description: By default, a pointer arrow is visible on the top edge of the menu, pointing to the trigger element. To remove the pointer, use the `showArrow` prop.
- example:
```jsx
}>
View With Arrow
}
>
}>
View Without Arrow
}
>
;
```
### Text overflow
- description: Define what happens with menu item text when it exceeds the popover `maxWidth`. By default, text wraps into multiple lines. To limit menu item text to a single line, use the `ellipsis` prop. The full title is revealed in a tooltip on mouse hover. To truncate a single item, set `ellipsis` on that `PopoverMenu.MenuItem`. An item's `ellipsis` overrides the menu's `ellipsis` for that item only.
- example:
```jsx
}>
View Wrapping Text
}
>
}>
View Text With Ellipsis
}
>
}>
View Ellipsis On One Item
}
>
;
```
### Custom dimensions
- description: Popover dimensions can be adjusted using the following props: - `minWidth` - sets the minimum pixel width (default: 144 px). - `maxWidth` - sets the maximum pixel width (default: 204 px). - `maxHeight` - sets the maximum pixel height. When the list of actions exceeds it, a scrollbar is visible.
- example:
```jsx
}>View Min Width
}
>
}>View Max Width
}
>
}>
View Max Height
}
>
;
```
## Developer Examples
### Fluid
- description: The trigger element can be resized to a specific container width using the `fluid` prop. Use it with `ellipsis` inside the trigger element to display the full label in a tooltip on hover.
- example:
```jsx
} ellipsis>
A very long trigger element title
}
>
;
```
## Common Use Case Examples
### Secondary actions in widgets
- description: The small size popover menu should be used in dense layouts and widgets. Irreversible actions should be highlighted with a `destructive` skin.
- example:
```jsx
}
>
}
text="Edit info"
/>
}
text="Edit availability"
/>
}
text="Manage permissions"
/>
}
skin="destructive"
text="Delete"
/>
Mike Peterson
Sales associate
;
```
### Secondary page actions
- description: Popover menus can be used to display a list of secondary page actions. Use `` to organize actions into groups. To make sure action titles will not wrap to multiple lines, set the `minWidth` value to `max-content`.
- example:
```jsx
}>
More Actions
}
>
}
text="Update booking settings"
/>
}
text="Accept payments"
/>
}
text="Manage staff"
/>
}
text="Create coupon"
/>
}
text="Get booked on Google"
/>
}>New Service
}
/>
;
```
### Disabled action explanation
- description: A `subtitle` should be used to explain disabled actions in a popover menu.
- example:
```jsx
}>
More Actions
}
>
}
text="Import contacts"
/>
}
text="Export contacts"
subtitle="Only site owners can export contacts"
disabled
/>
}
text="Manage custom fields"
/>
}
text="Manage labels"
/>
}
text="Privacy and GDPR"
/>
}
text="Watch demo video"
/>
}
text="Discover CRM tools"
/>
}
text="Send feedback"
/>
}>New Contact
}
/>
;
```