| 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';
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 relative to the height of the reference container rather than the viewport height.