| id | Overflow menu | ||||||
|---|---|---|---|---|---|---|---|
| section | components | ||||||
| cssPrefix | pf-v6-c-overflow-menu | ||||||
| propComponents |
|
import { useRef, useState } from 'react'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
Passing isVertical to OverflowMenu will change its behavior to respond to breakpoints based on window height instead of width.
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.
By passing in the breakpointReference and isVertical properties, the overflow menu's breakpoint will be determined relative to the height of the reference container rather than the window height.