Examples
Breakpoint on container
By passing in the breakpointReference property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.
You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.
Props
OverflowMenu
| Name | Type | Default | Description |
|---|---|---|---|
| breakpointrequired | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | Indicates breakpoint at which to switch between horizontal menu and vertical dropdown | |
| breakpointReference | HTMLElement | (() => HTMLElement) | React.RefObject<any> | A container reference to base the specified breakpoint on instead of the viewport width. | |
| children | any | Any elements that can be rendered in the menu | |
| className | string | Additional classes added to the OverflowMenu. |
OverflowMenuContent
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | Any elements that can be rendered in the menu | |
| className | string | Additional classes added to the OverflowMenuContent | |
| isPersistent | boolean | Modifies the overflow menu content visibility |
OverflowMenuControl
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | Any elements that can be rendered in the menu | |
| className | string | Additional classes added to the OverflowMenuControl | |
| hasAdditionalOptions | boolean | Triggers the overflow dropdown to persist at all viewport sizes |
OverflowMenuDropdownItem
| Name | Type | Default | Description |
|---|---|---|---|
| index | number | Indicates the index of the list item | |
| isShared | boolean | false | Indicates when a dropdown item shows and hides the corresponding list item |
OverflowMenuGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | Any elements that can be rendered in the menu | |
| className | string | Additional classes added to the OverflowMenuGroup | |
| groupType | 'button' | 'icon' | Indicates a button or icon group | |
| isPersistent | boolean | false | Modifies the overflow menu group visibility |
OverflowMenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | Any elements that can be rendered in the menu | |
| className | string | Additional classes added to the OverflowMenuItem | |
| isPersistent | boolean | false | Modifies the overflow menu item visibility |
CSS variables
| .pf-c-overflow-menu | --pf-c-overflow-menu--spacer--base | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu--spacer | 0.5rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__item--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu--c-divider--m-vertical--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-button-group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-button-group--space-items | 0.5rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-icon-button-group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-icon-button-group--space-items | 0 | ||
| .pf-c-overflow-menu__group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-button-group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-button-group > * | --pf-c-overflow-menu--spacer | 0.5rem | ||
| .pf-c-overflow-menu__group.pf-m-icon-button-group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-icon-button-group > * | --pf-c-overflow-menu--spacer | 0 | ||
| .pf-c-overflow-menu__item | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__content:last-child | --pf-c-overflow-menu--spacer | 0 | ||
| .pf-c-overflow-menu > .pf-c-divider | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child | --pf-c-overflow-menu--spacer | 0 | ||
View source on GitHub
