Examples
Props
OverflowMenu
Name | Type | Default | Description |
---|---|---|---|
breakpointrequired | 'md' | 'lg' | 'xl' | '2xl' | Indicates breakpoint at which to switch between horizontal menu and vertical dropdown | |
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