Examples
Props
OverflowMenu
Name | Type | Required | Default | Description |
---|---|---|---|---|
breakpoint | 'md' | 'lg' | 'xl' | '2xl' | Yes | Indicates breakpoint at which to switch between horizontal menu and vertical dropdown | |
children | any | No | Any elements that can be rendered in the menu | |
className | string | No | Additional classes added to the OverflowMenu. |
OverflowMenuContent
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | any | No | Any elements that can be rendered in the menu | |
className | string | No | Additional classes added to the OverflowMenuContent | |
isPersistent | boolean | No | Modifies the overflow menu content visibility |
OverflowMenuControl
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | any | No | Any elements that can be rendered in the menu | |
className | string | No | Additional classes added to the OverflowMenuControl | |
hasAdditionalOptions | boolean | No | Triggers the overflow dropdown to persist at all viewport sizes |
OverflowMenuDropdownItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
index | number | No | Indicates the index of the list item | |
isShared | boolean | No | false | Indicates when a dropdown item shows and hides the corresponding list item |
OverflowMenuGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | any | No | Any elements that can be rendered in the menu | |
className | string | No | Additional classes added to the OverflowMenuGroup | |
groupType | 'button' | 'icon' | No | Indicates a button or icon group | |
isPersistent | boolean | No | false | Modifies the overflow menu group visibility |
OverflowMenuItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | any | No | Any elements that can be rendered in the menu | |
className | string | No | Additional classes added to the OverflowMenuItem | |
isPersistent | boolean | No | 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