@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/menus/menu/react.js

@@ -0,0 +1,1540 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, createRef, useEffect, useRef, useState } from 'react';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
+import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+const pageData = {
+  "id": "Menu",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/menus/menu/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Menu/examples/Menu.md",
+  "relPath": "packages/react-core/src/components/Menu/examples/Menu.md",
+  "propComponents": [
+    {
+      "name": "Menu",
+      "description": "",
+      "props": [
+        {
+          "name": "activeItemId",
+          "type": "string | number",
+          "description": "itemId of the currently active item. You can also specify isActive on the MenuItem."
+        },
+        {
+          "name": "activeMenu",
+          "type": "string",
+          "description": "ID of the currently active menu for the drilldown variant"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the Menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Menu"
+        },
+        {
+          "name": "containsDrilldown",
+          "type": "boolean",
+          "description": "Indicates if menu contains a drilldown menu"
+        },
+        {
+          "name": "containsFlyout",
+          "type": "boolean",
+          "description": "Indicates if menu contains a flyout menu"
+        },
+        {
+          "name": "drilldownItemPath",
+          "type": "string[]",
+          "description": "Indicates the path of drilled in menu itemIds"
+        },
+        {
+          "name": "drilledInMenus",
+          "type": "string[]",
+          "description": "Array of menus that are drilled in"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the menu"
+        },
+        {
+          "name": "isMenuDrilledIn",
+          "type": "boolean",
+          "description": "Indicates if a menu is drilled into"
+        },
+        {
+          "name": "isNavFlyout",
+          "type": "boolean",
+          "description": "Indicating that the menu should have nav flyout styling"
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Indicates if the menu should be without the outer box-shadow"
+        },
+        {
+          "name": "isRootMenu",
+          "type": "boolean",
+          "description": "Internal flag indicating if the Menu is the root of a menu tree"
+        },
+        {
+          "name": "isScrollable",
+          "type": "boolean",
+          "description": "Indicates if the menu should be srollable"
+        },
+        {
+          "name": "onActionClick",
+          "type": "(event?: any, itemId?: any, actionId?: any) => void",
+          "description": "Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction."
+        },
+        {
+          "name": "onDrillIn",
+          "type": "(\n  event: React.KeyboardEvent | React.MouseEvent,\n  fromItemId: string,\n  toItemId: string,\n  itemId: string\n) => void",
+          "description": "Callback for drilling into a submenu"
+        },
+        {
+          "name": "onDrillOut",
+          "type": "(event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void",
+          "description": "Callback for drilling out of a submenu"
+        },
+        {
+          "name": "onGetMenuHeight",
+          "type": "(menuId: string, height: number) => void",
+          "description": "Callback for collecting menu heights"
+        },
+        {
+          "name": "onSelect",
+          "type": "(event?: React.MouseEvent, itemId?: MenuItemProps['itemId']) => void",
+          "description": "Callback for updating when item selection changes. You can also specify onClick on the MenuItem."
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "parentMenu",
+          "type": "string",
+          "description": "ID of parent menu for drilldown menus"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Determines the accessible role of the menu. For a non-checkbox menu that can have\none or more items selected, pass in \"listbox\"."
+        },
+        {
+          "name": "selected",
+          "type": "any | any[]",
+          "description": "Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem."
+        }
+      ]
+    },
+    {
+      "name": "MenuList",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the menu."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of menu list",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the menu list"
+        },
+        {
+          "name": "isAriaMultiselectable",
+          "type": "boolean",
+          "description": "Indicates to assistive technologies whether more than one item can be selected\nfor a non-checkbox menu. Only applies when the menu's role is \"listbox\".",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "MenuItem",
+      "description": "",
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Render item with one or more actions"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the menu item."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the menu list item."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the menu list item"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Component used to render the menu item"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description of the menu item"
+        },
+        {
+          "name": "direction",
+          "type": "'down' | 'up'",
+          "description": "Sub menu direction"
+        },
+        {
+          "name": "download",
+          "type": "string",
+          "description": "Navigation link download. Only set when the to property is present."
+        },
+        {
+          "name": "drilldownMenu",
+          "type": "React.ReactNode | (() => React.ReactNode)",
+          "description": "Drilldown menu of the item. Should be a Menu or DrilldownMenu type."
+        },
+        {
+          "name": "flyoutMenu",
+          "type": "React.ReactElement<any>",
+          "description": "Flyout menu. Should not be used if the to prop is defined."
+        },
+        {
+          "name": "hasCheckbox",
+          "type": "boolean",
+          "description": "Flag indicating the item has a checkbox"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Render item with icon"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Sets the id attribute on the menu item component."
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "description": "Flag indicating whether the item is active"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Render item as aria-disabled option"
+        },
+        {
+          "name": "isDanger",
+          "type": "boolean",
+          "description": "Flag indicating the item is in danger state"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Render item as disabled option"
+        },
+        {
+          "name": "isExternalLink",
+          "type": "boolean",
+          "description": "Render an external link icon on focus or hover, and set the link's\n\"target\" attribute to a value of \"_blank\"."
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating if the item is favorited"
+        },
+        {
+          "name": "isFocused",
+          "type": "boolean",
+          "description": "Flag indicating the item is focused"
+        },
+        {
+          "name": "isLoadButton",
+          "type": "boolean",
+          "description": "Flag indicating if the item causes a load"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "description": "Flag indicating a loading state"
+        },
+        {
+          "name": "isOnPath",
+          "type": "boolean",
+          "description": "True if item is on current selection path"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Flag indicating if the option is selected"
+        },
+        {
+          "name": "itemId",
+          "type": "any",
+          "description": "Identifies the component in the Menu onSelect or onActionClick callback"
+        },
+        {
+          "name": "onClick",
+          "type": "(event?: any) => void",
+          "description": "Callback for item click"
+        },
+        {
+          "name": "onShowFlyout",
+          "type": "(event?: any) => void",
+          "description": "Callback function when mouse leaves trigger"
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "description": "Navigation link relationship. Only set when the to property is present."
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "Navigation link target. Only set when the to property is present. If isExternalLink is also passed in, this property will be set to \"_blank\"."
+        },
+        {
+          "name": "to",
+          "type": "string",
+          "description": "Target navigation link. Should not be used if the flyout prop is defined."
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "description": "Props for adding a tooltip to a menu item"
+        }
+      ]
+    },
+    {
+      "name": "MenuItemAction",
+      "description": "",
+      "props": [
+        {
+          "name": "actionId",
+          "type": "any",
+          "description": "Identifies the action item in the onActionClick on the Menu"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessibility label",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the action button"
+        },
+        {
+          "name": "icon",
+          "type": "'favorites' | React.ReactNode",
+          "description": "The action icon to use"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Disables action, can also be specified on the MenuItem instead"
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating if the item is favorited"
+        },
+        {
+          "name": "onClick",
+          "type": "(event?: any) => void",
+          "description": "Callback on action click, can also specify onActionClick on the Menu instead"
+        }
+      ]
+    },
+    {
+      "name": "MenuContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within group"
+        },
+        {
+          "name": "getHeight",
+          "type": "(height: string) => void",
+          "description": "Callback to return the height of the menu content"
+        },
+        {
+          "name": "maxMenuHeight",
+          "type": "string",
+          "description": "Maximum height of menu content"
+        },
+        {
+          "name": "menuHeight",
+          "type": "string",
+          "description": "Height of the menu content"
+        }
+      ]
+    },
+    {
+      "name": "MenuSearch",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within search"
+        }
+      ]
+    },
+    {
+      "name": "MenuSearchInput",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within input"
+        }
+      ]
+    },
+    {
+      "name": "MenuGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the MenuGroup"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Group label"
+        },
+        {
+          "name": "labelHeadingLevel",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Group label heading level. Default is h1."
+        },
+        {
+          "name": "titleId",
+          "type": "string",
+          "description": "ID for title label"
+        }
+      ]
+    },
+    {
+      "name": "MenuContainer",
+      "description": "Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.",
+      "props": [
+        {
+          "name": "focusTimeoutDelay",
+          "type": "number",
+          "description": "Time in ms to wait before firing the toggles' focus event. Defaults to 0",
+          "defaultValue": "0"
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to indicate if menu is opened.",
+          "required": true
+        },
+        {
+          "name": "menu",
+          "type": "React.ReactElement<any, string | React.JSXElementConstructor<any>>",
+          "description": "Menu to be rendered",
+          "required": true
+        },
+        {
+          "name": "menuRef",
+          "type": "React.RefObject<any>",
+          "description": "Reference to the menu",
+          "required": true
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(isOpen: boolean) => void",
+          "description": "Callback to change the open state of the menu.\nTriggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys."
+        },
+        {
+          "name": "onOpenChangeKeys",
+          "type": "string[]",
+          "description": "Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.",
+          "defaultValue": "['Escape', 'Tab']"
+        },
+        {
+          "name": "onToggleKeydown",
+          "type": "(event: KeyboardEvent) => void",
+          "description": "Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key."
+        },
+        {
+          "name": "popperProps",
+          "type": "PopperOptions",
+          "description": "Additional properties to pass to the Popper"
+        },
+        {
+          "name": "shouldFocusFirstItemOnOpen",
+          "type": "boolean",
+          "description": "Flag indicating the first menu item should be focused after opening the dropdown.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "shouldPreventScrollOnItemFocus",
+          "type": "boolean",
+          "description": "Flag indicating if scroll on focus of the first menu item should occur.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "toggle",
+          "type": "React.ReactNode",
+          "description": "Toggle to be rendered",
+          "required": true
+        },
+        {
+          "name": "toggleRef",
+          "type": "React.RefObject<any>",
+          "description": "Reference to the toggle",
+          "required": true
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the dropdown menu",
+          "defaultValue": "9999"
+        }
+      ]
+    },
+    {
+      "name": "TooltipProps",
+      "description": "",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "CSS fade transition animation duration"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)",
+          "description": "The element to append the tooltip to, defaults to body"
+        },
+        {
+          "name": "aria",
+          "type": "'describedby' | 'labelledby' | 'none'",
+          "description": "aria-labelledby or aria-describedby for tooltip.\nThe trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container.\nIf you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'."
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the Tooltip is relatively placed to.\nIf you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead.\nUsage: <Tooltip><Button>Reference</Button></Tooltip>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Tooltip additional class"
+        },
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "description": "Tooltip content",
+          "required": true
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the tooltip to its target, defaults to 15"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the tooltip in view by flipping it if necessary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip disappears, Avoid passing in a value of \"0\", as users should\nbe given ample time to move their mouse from the trigger to the tooltip content without the content\nbeing hidden."
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The desired position to flip the tooltip to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space.\nYou can also pass an array of positions that determines the flip order. It should contain the initial position\nfollowed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to\n['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no\nspace to the right, so it finally shows the tooltip on the left."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id of the tooltip"
+        },
+        {
+          "name": "isContentLeftAligned",
+          "type": "boolean",
+          "description": "Flag to indicate that the text content is left aligned"
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "value for visibility when trigger is 'manual'"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the tooltip (default 18.75rem)"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the tooltip. If set to \"trigger\", the minimum width will be set to the reference element width."
+        },
+        {
+          "name": "onTooltipHidden",
+          "type": "() => void",
+          "description": "Callback when tooltip's hide transition has finished executing"
+        },
+        {
+          "name": "position",
+          "type": "| TooltipPosition\n    | 'auto'\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'",
+          "description": "Tooltip position. Note: With 'enableFlip' set to true,\nit will change the position if there is not enough space for the starting position.\nThe behavior of where it flips to can be controlled through the flipBehavior prop.\nThe 'auto' position chooses the side with the most space.\nThe 'auto' position requires the 'enableFlip' prop to be true."
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "description": "Tooltip trigger: click, mouseenter, focus, manual\nSet to manual to trigger tooltip programmatically (through the isVisible prop)"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the Tooltip is relatively placed to.\nIf you can wrap the element with the Tooltip, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "Unknown",
+          "type": "'off' | 'polite'",
+          "description": "Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the\ndefault behavior is 'polite' in order to ensure the tooltip contents is announced to\nassistive technologies. Otherwise the default behavior is 'off'."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the tooltip"
+        }
+      ]
+    },
+    {
+      "name": "PopperOptions",
+      "description": "Properties of Popper that can be used to customize its behavior.",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation."
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline'",
+          "description": "The container to append the popper to. Defaults to 'inline'."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "popper direction"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popper to the trigger"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "Enable to flip the popper when it reaches the boundary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper disappears"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The behavior of how the popper flips when it reaches the boundary"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string | 'trigger'",
+          "description": "Maximum width of the popper. If the value is \"trigger\", it will set the max width to the trigger element's width"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the popper. If the value is \"trigger\", it will set the min width to the trigger element's width"
+        },
+        {
+          "name": "offset",
+          "type": "OffsetOptions['offset']",
+          "description": "Override for the popper's offset"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is blurred (focus leaves)"
+        },
+        {
+          "name": "onDocumentClick",
+          "type": "(event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void",
+          "description": "Callback function when document is clicked"
+        },
+        {
+          "name": "onDocumentKeyDown",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when keydown event occurs on document"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is focused"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Callback when popper's hide transition has finished executing"
+        },
+        {
+          "name": "onHide",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition out."
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has been mounted to the DOM."
+        },
+        {
+          "name": "onMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters trigger"
+        },
+        {
+          "name": "onMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves trigger"
+        },
+        {
+          "name": "onPopperClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when popper is clicked"
+        },
+        {
+          "name": "onPopperMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters popper content"
+        },
+        {
+          "name": "onPopperMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves popper content"
+        },
+        {
+          "name": "onShow",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition in."
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has fully transitioned in."
+        },
+        {
+          "name": "onTriggerClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when trigger is clicked"
+        },
+        {
+          "name": "onTriggerEnter",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when Enter key is used on trigger"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "description": "Instead of direction and position can set the placement of the popper"
+        },
+        {
+          "name": "position",
+          "type": "'right' | 'left' | 'center' | 'start' | 'end'",
+          "description": "Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping."
+        },
+        {
+          "name": "positionModifiers",
+          "type": "{\n    top?: string;\n    right?: string;\n    bottom?: string;\n    left?: string;\n    topStart?: string;\n    topEnd?: string;\n    bottomStart?: string;\n    bottomEnd?: string;\n    leftStart?: string;\n    leftEnd?: string;\n    rightStart?: string;\n    rightEnd?: string;\n  }",
+          "description": "Map class names to positions, for example:\n{\n  top: styles.modifiers.top,\n  bottom: styles.modifiers.bottom,\n  left: styles.modifiers.left,\n  right: styles.modifiers.right\n}"
+        },
+        {
+          "name": "preventOverflow",
+          "type": "boolean",
+          "description": "Flag to prevent the popper from overflowing its container and becoming partially obscured."
+        },
+        {
+          "name": "width",
+          "type": "string | 'trigger'",
+          "description": "Custom width of the popper. If the value is \"trigger\", it will set the width to the trigger element's width"
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the popper element"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-menu"
+  ],
+  "examples": [
+    "Basic menus",
+    "Danger menu item",
+    "With icons",
+    "With actions",
+    "With links",
+    "With descriptions",
+    "Item checkbox",
+    "Menu footer",
+    "Separated items",
+    "Titled groups of items",
+    "With favorites",
+    "Filtering with search input",
+    "Option single select menu",
+    "Option multi select menu",
+    "Scrollable menus",
+    "Scrollable menu with custom height",
+    "With view more",
+    "With drilldown",
+    "Initially drilled-in menu",
+    "With drilldown - submenu functions",
+    "With drilldown breadcrumbs",
+    "With drilldown and inline filter"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  createRef,
+  useEffect,
+  useRef,
+  useState,
+  RhUiMenuBarsIcon,
+  RhUiClipboardFillIcon,
+  RhUiBranchFillIcon,
+  RhUiServerStackFillIcon,
+  CubeIcon,
+  RhUiTableIcon,
+  RhUiNotificationFillIcon,
+  RhUiStorageDomainFillIcon,
+  RhMicronsCaretLeftIcon,
+  RhMicronsCaretDownIcon
+};
+pageData.examples = {
+  'Basic menus': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core';\n\nexport const MenuBasic: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n  const [isPlain, setIsPlain] = useState(false);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  const togglePlain = (checked: boolean) => {\n    setIsPlain(checked);\n  };\n\n  return (\n    <Fragment>\n      <Menu activeItemId={activeItem} onSelect={onSelect} isPlain={isPlain}>\n        <MenuContent>\n          <MenuList>\n            <MenuItem itemId={0}>Action</MenuItem>\n            <MenuItem\n              itemId={1}\n              to=\"#default-link2\"\n              // just for demo so that navigation is not triggered\n              onClick={(event) => event.preventDefault()}\n            >\n              Link\n            </MenuItem>\n            <MenuItem isDisabled>Disabled action</MenuItem>\n            <MenuItem isDisabled to=\"#default-link4\">\n              Disabled link\n            </MenuItem>\n            <MenuItem isAriaDisabled tooltipProps={{ content: 'aria-disabled action', position: 'top' }}>\n              Aria-disabled action\n            </MenuItem>\n            <MenuItem\n              isAriaDisabled\n              to=\"#default-link5\"\n              tooltipProps={{ content: 'aria-disabled link', position: 'top' }}\n            >\n              Aria-disabled link\n            </MenuItem>\n          </MenuList>\n        </MenuContent>\n      </Menu>\n      <div style={{ marginTop: 20 }}>\n        <Checkbox\n          label=\"Plain menu\"\n          isChecked={isPlain}\n          onChange={(_event, checked) => togglePlain(checked)}\n          aria-label=\"plain menu checkbox\"\n          id=\"toggle-plain\"\n          name=\"toggle-plain\"\n        />\n      </div>\n    </Fragment>\n  );\n};\n","title":"Basic menus","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A menu may contain multiple variations of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` components. The following example shows a few different states of menu items, where they may:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`itemId`}
+          </code>
+          {` property to link to callbacks. In this example, the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onSelect`}
+          </code>
+          {` property logs information to the console when a menu item is selected. In practice, specific actions can be linked to `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onSelect`}
+          </code>
+          {` callbacks.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`to`}
+          </code>
+          {` property to direct users to other resources or webpages after selecting a menu item, and the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onClick`}
+          </code>
+          {` property to pass in a callback for specific menu items.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {` property to disable a menu item.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isPlain`}
+          </code>
+          {` property to remove the outer box shadow and style the menu plainly instead.`}
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'Danger menu item': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';\n\nexport const MenuDangerMenuItem: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu activeItemId={activeItem} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action 1</MenuItem>\n          <MenuItem itemId={1}>Action 2</MenuItem>\n          <Divider component=\"li\" />\n          <MenuItem itemId={2} isDanger>\n            Delete\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Danger menu item","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To indicate that a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` is connected to a potentially destructive action, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDanger`}
+        </code>
+        {` property. The "Delete" item in the following example demonstrates how danger items look.`}
+      </p>
+    </Example>,
+  'With icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const MenuWithIcons: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem icon={<RhUiBranchFillIcon />} itemId={0}>\n            From git\n          </MenuItem>\n          <MenuItem icon={<RhUiServerStackFillIcon />} itemId={1}>\n            Container image\n          </MenuItem>\n          <MenuItem icon={<CubeIcon />} itemId={2}>\n            Docker file\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property to add a familiar icon before a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` to accelerate text label recognition.`}
+      </p>
+    </Example>,
+  'With actions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core';\nimport RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';\nimport RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const MenuWithActions: React.FunctionComponent = () => {\n  const [selectedItems, setSelectedItems] = useState<number[]>([0, 2, 3]);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    if (selectedItems.indexOf(item) !== -1) {\n      setSelectedItems(selectedItems.filter((id) => id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    <Menu\n      onSelect={onSelect}\n      // eslint-disable-next-line no-console\n      onActionClick={(_event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}\n      activeItemId={0}\n    >\n      <MenuContent>\n        <MenuGroup label=\"Actions\" labelHeadingLevel=\"h3\">\n          <MenuList>\n            <MenuItem\n              isSelected={selectedItems.indexOf(0) !== -1}\n              actions={\n                <MenuItemAction\n                  icon={<RhUiBranchFillIcon />}\n                  actionId=\"code\"\n                  // eslint-disable-next-line no-console\n                  onClick={() => console.log('clicked on code icon')}\n                  aria-label=\"Code\"\n                />\n              }\n              description=\"This is a description\"\n              itemId={0}\n            >\n              Item 1\n            </MenuItem>\n            <MenuItem\n              isDisabled\n              isSelected={selectedItems.indexOf(1) !== -1}\n              actions={<MenuItemAction icon={<RhUiNotificationFillIcon />} actionId=\"alert\" aria-label=\"Alert\" />}\n              description=\"This is a description\"\n              itemId={1}\n            >\n              Item 2\n            </MenuItem>\n            <MenuItem\n              isSelected={selectedItems.indexOf(2) !== -1}\n              actions={<MenuItemAction icon={<RhUiClipboardFillIcon />} actionId=\"copy\" aria-label=\"Copy\" />}\n              itemId={2}\n            >\n              Item 3\n            </MenuItem>\n            <MenuItem\n              isSelected={selectedItems.indexOf(3) !== -1}\n              actions={<MenuItemAction icon={<RhUiMenuBarsIcon />} actionId=\"expand\" aria-label=\"Expand\" />}\n              description=\"This is a description\"\n              itemId={3}\n            >\n              Item 4\n            </MenuItem>\n          </MenuList>\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With actions","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To connect a menu item to an action icon, add a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItemAction>`}
+        </code>
+        {` to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {`, and use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property to load an easily recognizable icon.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To trigger an action when any menu action icon is selected, pass a callback to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onActionClick`}
+        </code>
+        {` property of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {`. The following example logs to the console any time any action icon is selected.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To trigger an action when a specific item's action icon is selected, pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onClick`}
+        </code>
+        {` property to that `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItemAction>`}
+        </code>
+        {`. The following example logs "clicked on code icon" to the console when the "code" icon is selected.`}
+      </p>
+    </Example>,
+  'With links': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const MenuWithLinks: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem isExternalLink to=\"#default-link1\" itemId={0}>\n            Link 1\n          </MenuItem>\n          <MenuItem isExternalLink to=\"#default-link2\" itemId={1}>\n            Link 2\n          </MenuItem>\n          <MenuItem to=\"#default-link3\" itemId={2}>\n            Link 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With links","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`to`}
+        </code>
+        {` property to add a link to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` that directs users to a new page when the item is selected. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isExternalLink`}
+        </code>
+        {` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`target="_blank"`}
+        </code>
+        {` so that the link opens in a new tab or window.`}
+      </p>
+    </Example>,
+  'With descriptions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\n\nexport const MenuWithDescription: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem icon={<RhUiBranchFillIcon />} description=\"Description\" itemId={0}>\n            Action 1\n          </MenuItem>\n          <MenuItem isDisabled icon={<RhUiBranchFillIcon />} description=\"Description\" itemId={1}>\n            Action 2 disabled\n          </MenuItem>\n          <MenuItem\n            icon={<RhUiBranchFillIcon />}\n            description=\"Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est.\"\n            itemId={2}\n          >\n            Action 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With descriptions","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`description`}
+        </code>
+        {` property to add short descriptive text below any menu item that needs additional context.`}
+      </p>
+    </Example>,
+  'Item checkbox': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const MenuWithCheckbox: React.FunctionComponent = () => {\n  const [selectedItems, setSelectedItems] = useState<number[]>([]);\n\n  /* eslint no-unused-vars: [\"error\", {\"args\": \"after-used\"}] */\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    if (selectedItems.includes(item)) {\n      setSelectedItems(selectedItems.filter((id) => id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    <Menu onSelect={onSelect} selected={selectedItems}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>\n            Checkbox 1\n          </MenuItem>\n          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>\n            Checkbox 2\n          </MenuItem>\n          <MenuItem hasCheckbox itemId={2} isDisabled>\n            Checkbox 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Item checkbox","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hasCheck`}
+        </code>
+        {` property to add a checkbox to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {`. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSelected`}
+        </code>
+        {` property to indicate when a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` is selected.`}
+      </p>
+    </Example>,
+  'Menu footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core';\n\nexport const MenuWithFooter: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu activeItemId={activeItem} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action</MenuItem>\n          <MenuItem\n            itemId={1}\n            to=\"#default-link2\"\n            // just for demo so that navigation is not triggered\n            onClick={(event) => event.preventDefault()}\n          >\n            Link\n          </MenuItem>\n          <MenuItem isDisabled>Disabled action</MenuItem>\n          <MenuItem isDisabled to=\"#default-link4\">\n            Disabled link\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n      <MenuFooter>\n        <Button variant=\"link\" isInline>\n          Action\n        </Button>\n      </MenuFooter>\n    </Menu>\n  );\n};\n","title":"Menu footer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Add a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuFooter>`}
+        </code>
+        {` that contains separate, but related actions at the bottom of a menu.`}
+      </p>
+    </Example>,
+  'Separated items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const MenuWithSeparators: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action 1</MenuItem>\n          <MenuItem itemId={1}>Action 2</MenuItem>\n          <Divider component=\"li\" />\n          <MenuItem itemId={2}>Action 3</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Separated items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/divider","className":""}}>
+          {`divider`}
+        </PatternflyThemeLink>
+        {` to visually separate `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuContent>`}
+        </code>
+        {`. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`component`}
+        </code>
+        {` property to specify the type of divider component to use.`}
+      </p>
+    </Example>,
+  'Titled groups of items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core';\n\nexport const MenuWithTitledGroups: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuContent>\n        <MenuGroup>\n          <MenuList>\n            <MenuItem to=\"#\" itemId={0}>\n              Link not in group\n            </MenuItem>\n          </MenuList>\n        </MenuGroup>\n        <Divider />\n        <MenuGroup label=\"Group 1\" labelHeadingLevel=\"h3\">\n          <MenuList>\n            <MenuItem to=\"#\" itemId={1}>\n              Link 1\n            </MenuItem>\n            <MenuItem itemId={2}>Link 2</MenuItem>\n          </MenuList>\n        </MenuGroup>\n        <Divider />\n        <MenuGroup label=\"Group 2\" labelHeadingLevel=\"h3\">\n          <MenuList>\n            <MenuItem to=\"#\" itemId={3}>\n              Link 1\n            </MenuItem>\n            <MenuItem to=\"#\" itemId={4}>\n              Link 2\n            </MenuItem>\n          </MenuList>\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Titled groups of items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Add a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuGroup>`}
+        </code>
+        {` to organize `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuContent>`}
+        </code>
+        {` and use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`label`}
+        </code>
+        {` property to title a group of menu items. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`labelHeadingLevel`}
+        </code>
+        {` property to assign a heading level to the menu group label.`}
+      </p>
+    </Example>,
+  'With favorites': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';\nimport RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';\nimport RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const MenuWithFavorites: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n  const [favorites, setFavorites] = useState<string[]>([]);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  const onFavorite = (event, itemId: string, actionId: string) => {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId} - ${actionId}`);\n    if (actionId === 'fav') {\n      const isFavorite = favorites.includes(itemId);\n      if (isFavorite) {\n        setFavorites(favorites.filter((fav) => fav !== itemId));\n      } else {\n        setFavorites([...favorites, itemId]);\n      }\n    }\n  };\n\n  const items = [\n    {\n      text: 'Item 1',\n      description: 'Description 1',\n      itemId: 'item-1',\n      action: <RhUiMenuBarsIcon />,\n      actionId: 'bars'\n    },\n    {\n      text: 'Item 2',\n      description: 'Description 2',\n      itemId: 'item-2',\n      action: <RhUiClipboardFillIcon />,\n      actionId: 'clipboard'\n    },\n    {\n      text: 'Item 3',\n      description: 'Description 3',\n      itemId: 'item-3',\n      action: <RhUiNotificationFillIcon />,\n      actionId: 'bell'\n    }\n  ];\n\n  return (\n    <Menu onSelect={onSelect} onActionClick={onFavorite} activeItemId={activeItem}>\n      <MenuContent>\n        {favorites.length > 0 && (\n          <Fragment>\n            <MenuGroup label=\"Favorites\" labelHeadingLevel=\"h3\">\n              <MenuList>\n                {items\n                  .filter((item) => favorites.includes(item.itemId))\n                  .map((item) => {\n                    const { text, description, itemId, action, actionId } = item;\n                    return (\n                      <MenuItem\n                        key={`fav-${itemId}`}\n                        isFavorited\n                        description={description}\n                        itemId={itemId}\n                        actions={<MenuItemAction actionId={actionId} icon={action} aria-label={actionId} />}\n                      >\n                        {text}\n                      </MenuItem>\n                    );\n                  })}\n              </MenuList>\n            </MenuGroup>\n            <Divider />\n          </Fragment>\n        )}\n        <MenuGroup label=\"All actions\" labelHeadingLevel=\"h3\">\n          <MenuList>\n            {items.map((item) => {\n              const { text, description, itemId, action, actionId } = item;\n              const isFavorited = favorites.includes(item.itemId);\n              return (\n                <MenuItem\n                  key={itemId}\n                  isFavorited={isFavorited}\n                  description={description}\n                  itemId={itemId}\n                  actions={<MenuItemAction actionId={actionId} icon={action} aria-label={actionId} />}\n                >\n                  {text}\n                </MenuItem>\n              );\n            })}\n          </MenuList>\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With favorites","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isFavorited`}
+        </code>
+        {` property identifies items that a user has favorited.`}
+      </p>
+    </Example>,
+  'Filtering with search input': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Menu,\n  MenuList,\n  MenuItem,\n  MenuContent,\n  MenuSearch,\n  MenuSearchInput,\n  Divider,\n  SearchInput\n} from '@patternfly/react-core';\n\nexport const MenuFilteringWithSearchInput: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n  const [input, setInput] = useState('');\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  const handleTextInputChange = (value: string) => {\n    setInput(value);\n  };\n\n  const menuListItemsText = ['Action 1', 'Action 2', 'Action 3'];\n\n  const menuListItems = menuListItemsText\n    .filter((item) => !input || item.toLowerCase().includes(input.toString().toLowerCase()))\n    .map((currentValue, index) => (\n      <MenuItem key={currentValue} itemId={index}>\n        {currentValue}\n      </MenuItem>\n    ));\n  if (input && menuListItems.length === 0) {\n    menuListItems.push(\n      <MenuItem isDisabled key=\"no result\">\n        No results found\n      </MenuItem>\n    );\n  }\n\n  return (\n    <Menu onSelect={onSelect} activeItemId={activeItem}>\n      <MenuSearch>\n        <MenuSearchInput>\n          <SearchInput\n            value={input}\n            aria-label=\"Filter menu items\"\n            onChange={(_event, value) => handleTextInputChange(value)}\n            onClear={() => handleTextInputChange('')}\n          />\n        </MenuSearchInput>\n      </MenuSearch>\n      <Divider />\n      <MenuContent>\n        <MenuList>{menuListItems}</MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Filtering with search input","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <PatternflyThemeLink {...{"to":"/components/search-input","className":""}}>
+          {`search input`}
+        </PatternflyThemeLink>
+        {` component can be placed within `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuSearch>`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuSearchInput>`}
+        </code>
+        {` to render a search input at the top of the menu. In the following example, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onChange`}
+        </code>
+        {` property of the text input is passed a callback that filters menu items as a user types.`}
+      </p>
+    </Example>,
+  'Option single select menu': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\nimport RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';\n\nexport const MenuOptionSingleSelect: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n  const [selectedItem, setSelectedItem] = useState(0);\n\n  const onSelect = (_event, itemId) => {\n    setActiveItem(itemId);\n    setSelectedItem(itemId);\n  };\n\n  return (\n    <Menu role=\"listbox\" onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>\n      <MenuContent>\n        <MenuList aria-label=\"Menu single select example\">\n          <MenuItem itemId={0}>Option 1</MenuItem>\n          <MenuItem itemId={1}>Option 2</MenuItem>\n          <MenuItem icon={<RhUiTableIcon />} itemId={2}>\n            Option 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Option single select menu","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example demonstrates a single option select menu that persists a selected menu item. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`selected`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {` to label a selected item with a checkmark. You can also use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSelected`}
+        </code>
+        {` property on a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuItem>`}
+        </code>
+        {` to indicate that it is selected.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You must also use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`role`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {` with a value of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`"listbox"`}
+        </code>
+        {` when using a non-checkbox select menu.`}
+      </p>
+    </Example>,
+  'Option multi select menu': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\nimport RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';\n\nexport const MenuOptionMultiSelect: React.FunctionComponent = () => {\n  const [selectedItems, setSelectedItems] = useState<number[]>([]);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    const item = itemId as number;\n    if (selectedItems.indexOf(item) !== -1) {\n      setSelectedItems(selectedItems.filter((id) => id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    <Menu role=\"listbox\" onSelect={onSelect} activeItemId={0} selected={selectedItems}>\n      <MenuContent>\n        <MenuList isAriaMultiselectable aria-label=\"Menu multi select example\">\n          <MenuItem itemId={0}>Option 1</MenuItem>\n          <MenuItem itemId={1}>Option 2</MenuItem>\n          <MenuItem icon={<RhUiTableIcon />} itemId={2}>\n            Option 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Option multi select menu","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`itemId`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`selected`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {`, and pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isAriaMultiselectable`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuList>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Similar to a single select menu, you must also pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`role="listbox"`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Scrollable menus': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const MenuScrollable: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event, itemId) => {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId);\n  };\n\n  return (\n    <Menu activeItemId={activeItem} onSelect={onSelect} isScrollable>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action 1</MenuItem>\n          <MenuItem itemId={1}>Action 2</MenuItem>\n          <MenuItem itemId={2}>Action 3</MenuItem>\n          <MenuItem itemId={3}>Action 4</MenuItem>\n          <MenuItem itemId={4}>Action 5</MenuItem>\n          <MenuItem itemId={5}>Action 6</MenuItem>\n          <MenuItem itemId={6}>Action 7</MenuItem>\n          <MenuItem itemId={7}>Action 8</MenuItem>\n          <MenuItem itemId={8}>Action 9</MenuItem>\n          <MenuItem itemId={9}>Action 10</MenuItem>\n          <MenuItem itemId={10}>Action 11</MenuItem>\n          <MenuItem itemId={11}>Action 12</MenuItem>\n          <MenuItem itemId={12}>Action 13</MenuItem>\n          <MenuItem itemId={13}>Action 14</MenuItem>\n          <MenuItem itemId={14}>Action 15</MenuItem>\n          <MenuItem\n            itemId={15}\n            to=\"#default-link2\"\n            // just for demo so that navigation is not triggered\n            onClick={(event) => event.preventDefault()}\n          >\n            Link\n          </MenuItem>\n          <MenuItem isDisabled>Disabled action</MenuItem>\n          <MenuItem isDisabled to=\"#default-link4\">\n            Disabled link\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Scrollable menus","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isScrollable`}
+        </code>
+        {` property to make a long `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Menu>`}
+        </code>
+        {` scrollable and visually condensed.`}
+      </p>
+    </Example>,
+  'Scrollable menu with custom height': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event, itemId) => {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId);\n  };\n\n  return (\n    <Menu activeItemId={activeItem} onSelect={onSelect} isScrollable>\n      <MenuContent menuHeight=\"200px\">\n        <MenuList>\n          <MenuItem itemId={0}>Action 1</MenuItem>\n          <MenuItem itemId={1}>Action 2</MenuItem>\n          <MenuItem itemId={2}>Action 3</MenuItem>\n          <MenuItem itemId={3}>Action 4</MenuItem>\n          <MenuItem itemId={4}>Action 5</MenuItem>\n          <MenuItem itemId={5}>Action 6</MenuItem>\n          <MenuItem itemId={6}>Action 7</MenuItem>\n          <MenuItem itemId={7}>Action 8</MenuItem>\n          <MenuItem itemId={8}>Action 9</MenuItem>\n          <MenuItem itemId={9}>Action 10</MenuItem>\n          <MenuItem itemId={10}>Action 11</MenuItem>\n          <MenuItem itemId={11}>Action 12</MenuItem>\n          <MenuItem itemId={12}>Action 13</MenuItem>\n          <MenuItem itemId={13}>Action 14</MenuItem>\n          <MenuItem itemId={14}>Action 15</MenuItem>\n          <MenuItem\n            itemId={15}\n            to=\"#default-link2\"\n            // just for demo so that navigation is not triggered\n            onClick={(event) => event.preventDefault()}\n          >\n            Link\n          </MenuItem>\n          <MenuItem isDisabled>Disabled action</MenuItem>\n          <MenuItem isDisabled to=\"#default-link4\">\n            Disabled link\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Scrollable menu with custom height","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Adjust the visual size of a scrollable menu by using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`menuHeight`}
+        </code>
+        {` property within `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuContent>`}
+        </code>
+        {`. This example adjusts the height to 200px.`}
+      </p>
+    </Example>,
+  'With view more': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';\n\nexport const MenuWithViewMore: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState<number | string>(0);\n  const [isLoading, setIsLoading] = useState(false);\n  const [numOptions, setNumOptions] = useState(3);\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [menuOptions, setMenuOptions] = useState([\n    <MenuItem key={0} itemId={'view-more-0'}>\n      Action\n    </MenuItem>,\n    <MenuItem\n      key={1}\n      itemId={'view-more-1'}\n      to=\"#default-link2\"\n      // just for demo so that navigation is not triggered\n      onClick={(event) => event.preventDefault()}\n    >\n      Link\n    </MenuItem>,\n    <MenuItem key={2} itemId=\"view-more-2\" isDisabled>\n      Disabled action\n    </MenuItem>,\n    <MenuItem key={3} itemId=\"view-more-3\" isDisabled to=\"#default-link4\">\n      Disabled link\n    </MenuItem>,\n    <MenuItem key={4} itemId=\"view-more-4\">\n      Action 2\n    </MenuItem>,\n    <MenuItem key={5} itemId=\"view-more-5\">\n      Action 3\n    </MenuItem>,\n    <MenuItem key={6} itemId=\"view-more-6\">\n      Action 4\n    </MenuItem>,\n    <MenuItem key={7} itemId=\"view-more-7\">\n      Action 5\n    </MenuItem>,\n    <MenuItem key={8} itemId=\"view-more-8\">\n      Final option\n    </MenuItem>\n  ]);\n  const [visibleOptions, setVisibleOptions] = useState(menuOptions.slice(0, numOptions));\n\n  const activeItemRef = useRef<HTMLElement>(null);\n  const viewMoreRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    activeItemRef.current?.focus();\n  }, [visibleOptions]);\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId as string);\n  };\n\n  const simulateNetworkCall = (networkCallback: () => void) => {\n    setTimeout(networkCallback, 2000);\n  };\n\n  const getNextValidItem = (startingIndex: number, maxLength: number) => {\n    let validItem;\n    for (let i = startingIndex; i < maxLength; i++) {\n      if (menuOptions[i].props.isDisabled) {\n        continue;\n      } else {\n        validItem = menuOptions[i];\n        break;\n      }\n    }\n    return validItem;\n  };\n\n  const loadMoreOptions = () => {\n    const newLength = numOptions + 3 <= menuOptions.length ? numOptions + 3 : menuOptions.length;\n    const prevPosition = numOptions;\n    const nextValidItem = getNextValidItem(prevPosition, newLength);\n\n    setNumOptions(newLength);\n    setIsLoading(false);\n    setActiveItem(nextValidItem.props.itemId);\n    setVisibleOptions(menuOptions.slice(0, newLength));\n  };\n\n  const onViewMoreClick = () => {\n    setIsLoading(true);\n    simulateNetworkCall(() => {\n      loadMoreOptions();\n    });\n  };\n\n  return (\n    <Menu activeItemId={activeItem} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          {visibleOptions.map((option) => {\n            const props = option.props;\n\n            return <MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;\n          })}\n          {numOptions !== menuOptions.length && (\n            <MenuItem\n              {...(!isLoading && { isLoadButton: true })}\n              {...(isLoading && { isLoading: true })}\n              onClick={onViewMoreClick}\n              itemId=\"loader\"\n              ref={viewMoreRef}\n            >\n              {isLoading ? <Spinner size=\"lg\" /> : 'View more'}\n            </MenuItem>\n          )}\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With view more","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`If you want to initially render only a certain number of menu items within a large menu, you can add a "view more" menu item with a callback passed into its `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onClick`}
+        </code>
+        {` property that will render additional menu items.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In this example, 3 additional menu items are revealed each time the "view more" option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the "view more" link disappears.`}
+      </p>
+    </Example>,
+  'With drilldown': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const MenuWithDrilldown: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);\n  const [menuHeights, setMenuHeights] = useState<any>({});\n  const [activeMenu, setActiveMenu] = useState<string>('drilldown-rootMenu');\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) => {\n    if (menuHeights[menuId] === undefined || (menuId !== 'drilldown-rootMenu' && menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    <Menu\n      id=\"drilldown-rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldown-drilldownMenuStart\">\n                <MenuItem itemId=\"group:start_rollout_breadcrumb\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldown-drilldownMenuStartGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldown-drilldownMenuStartLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:pause_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldown-drilldownMenuPause\">\n                <MenuItem itemId=\"group:pause_rollout_breadcrumb\" direction=\"up\">\n                  Pause rollouts\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldown-drilldownMenuGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldown-drilldownMenuLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Pause rollouts\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:storage\"\n            icon={<RhUiStorageDomainFillIcon />}\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldown-drilldownMenuStorage\">\n                <MenuItem itemId=\"group:storage_breadcrumb\" icon={<RhUiStorageDomainFillIcon />} direction=\"up\">\n                  Add storage\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem icon={<RhUiBranchFillIcon />} itemId=\"git\">\n                  From git\n                </MenuItem>\n                <MenuItem icon={<RhUiServerStackFillIcon />} itemId=\"container\">\n                  Container image\n                </MenuItem>\n                <MenuItem icon={<CubeIcon />} itemId=\"docker\">\n                  Docker file\n                </MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Add storage\n          </MenuItem>\n          <MenuItem itemId=\"edit\">Edit</MenuItem>\n          <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With drilldown","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use a drilldown menu to contain different levels of menu items. When a parent menu item (an item that has a submenu of children) is selected, the menu is replaced with the children items.`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To indicate that a menu contains a drilldown, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`containsDrilldown`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To indicate the path of drilled-in menu item ids, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`drilldownItemPath`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Pass in an array of drilled-in menus with the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`drilledInMenus`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onDrillIn`}
+          </code>
+          {` and `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onDrillOut`}
+          </code>
+          {` properties to contain callbacks for drilling into and drilling out of a submenu, respectively.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To account for updated heights as menus drill in and out of use, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onGetMenuHeight`}
+          </code>
+          {` property. When starting from a drilled-in state, the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onGetMenuHeight`}
+          </code>
+          {` property must define the height of the root menu.`}
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'Initially drilled-in menu': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const MenuDrilldownInitialState: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([\n    'initial-state-rootMenu',\n    'initial-state-drilldownMenuStart'\n  ]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>(['group:start_rollout', 'group:app_grouping']);\n  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 186 }); // The root menu height must be defined when starting from a drilled in state\n  const [activeMenu, setActiveMenu] = useState<string>('initial-state-drilldownMenuStartGrouping');\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) => {\n    if (menuHeights[menuId] === undefined || (menuId !== 'initial-state-rootMenu' && menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    <Menu\n      id=\"initial-state-rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"initial-state-drilldownMenuStart\">\n                <MenuItem itemId=\"group:start_rollout_breadcrumb\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"initial-state-drilldownMenuStartGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"initial-state-drilldownMenuStartLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:pause_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"initial-state-drilldownMenuPause\">\n                <MenuItem itemId=\"group:pause_rollout_breadcrumb\" direction=\"up\">\n                  Pause rollouts\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"initial-state-drilldownMenuGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"initial-state-drilldownMenuLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Pause rollouts\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:storage\"\n            icon={<RhUiStorageDomainFillIcon />}\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"initial-state-drilldownMenuStorage\">\n                <MenuItem itemId=\"group:storage_breadcrumb\" icon={<RhUiStorageDomainFillIcon />} direction=\"up\">\n                  Add storage\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem icon={<RhUiBranchFillIcon />} itemId=\"git\">\n                  From git\n                </MenuItem>\n                <MenuItem icon={<RhUiServerStackFillIcon />} itemId=\"container\">\n                  Container image\n                </MenuItem>\n                <MenuItem icon={<CubeIcon />} itemId=\"docker\">\n                  Docker file\n                </MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Add storage\n          </MenuItem>\n          <MenuItem itemId=\"edit\">Edit</MenuItem>\n          <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"Initially drilled-in menu","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To render an initially drilled-in menu, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`drilldownItemPath`}
+        </code>
+        {`, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`drilledInMenus`}
+        </code>
+        {`, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`activeMenu`}
+        </code>
+        {` properties must be set to default values.`}
+      </p>
+    </Example>,
+  'With drilldown - submenu functions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);\n  const [menuHeights, setMenuHeights] = useState<any>({});\n  const [activeMenu, setActiveMenu] = useState<string>('functions-rootMenu');\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) => {\n    if (menuHeights[menuId] === undefined || (menuId !== 'functions-rootMenu' && menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    <Menu\n      id=\"functions-rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={() => (\n              <DrilldownMenu id=\"functions-drilldownMenuStart\">\n                <MenuItem itemId=\"group:start_rollout_breadcrumb\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={() => (\n                    <DrilldownMenu id=\"functions-drilldownMenuStartGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  )}\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={() => (\n                    <DrilldownMenu id=\"functions-drilldownMenuStartLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  )}\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            )}\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:pause_rollout\"\n            direction=\"down\"\n            drilldownMenu={() => (\n              <DrilldownMenu id=\"functions-drilldownMenuPause\">\n                <MenuItem itemId=\"group:pause_rollout_breadcrumb\" direction=\"up\">\n                  Pause rollouts\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={() => (\n                    <DrilldownMenu id=\"functions-drilldownMenuGrouping\">\n                      <MenuItem itemId=\"group:app_grouping_breadcrumb\" direction=\"up\">\n                        Application grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  )}\n                >\n                  Application grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={() => (\n                    <DrilldownMenu id=\"functions-drilldownMenuLabels\">\n                      <MenuItem itemId=\"group:labels_breadcrumb\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  )}\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            )}\n          >\n            Pause rollouts\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:storage\"\n            icon={<RhUiStorageDomainFillIcon />}\n            direction=\"down\"\n            drilldownMenu={() => (\n              <DrilldownMenu id=\"functions-drilldownMenuStorage\">\n                <MenuItem itemId=\"group:storage_breadcrumb\" icon={<RhUiStorageDomainFillIcon />} direction=\"up\">\n                  Add storage\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem icon={<RhUiBranchFillIcon />} itemId=\"git\">\n                  From git\n                </MenuItem>\n                <MenuItem icon={<RhUiServerStackFillIcon />} itemId=\"container\">\n                  Container image\n                </MenuItem>\n                <MenuItem icon={<CubeIcon />} itemId=\"docker\">\n                  Docker file\n                </MenuItem>\n              </DrilldownMenu>\n            )}\n          >\n            Add storage\n          </MenuItem>\n          <MenuItem itemId=\"edit\">Edit</MenuItem>\n          <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With drilldown - submenu functions","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`For added flexibility with large menus, you may create a menu by passing a function to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`drilldownMenu`}
+        </code>
+        {`. This approach allows you to create menu items dynamically, rather than creating everything up front.`}
+      </p>
+    </Example>,
+  'With drilldown breadcrumbs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Badge,\n  Breadcrumb,\n  BreadcrumbHeading,\n  BreadcrumbItem,\n  Checkbox,\n  Divider,\n  DrilldownMenu,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Icon,\n  Menu,\n  MenuBreadcrumb,\n  MenuContent,\n  MenuItem,\n  MenuList,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);\n  const [menuHeights, setMenuHeights] = useState<any>({});\n  const [activeMenu, setActiveMenu] = useState<string>('breadcrumbs-rootMenu');\n  const [breadcrumb, setBreadcrumb] = useState<React.JSX.Element | null>();\n  const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);\n\n  const onToggle = (isOpen: boolean, key: string) => {\n    switch (key) {\n      case 'app':\n        setBreadcrumb(appGroupingBreadcrumb(isOpen));\n        break;\n      case 'label':\n        setBreadcrumb(labelsBreadcrumb(isOpen));\n        break;\n      case 'pause-app':\n        setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(isOpen));\n        break;\n      case 'pause-label':\n        setBreadcrumb(pauseRolloutsLabelsBreadcrumb(isOpen));\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onToggleMaxMenuHeight = (checked: boolean) => {\n    setWithMaxMenuHeight(checked);\n  };\n\n  const drillOut = (\n    _event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,\n    toMenuId: string,\n    fromPathId: string,\n    breadcrumb: React.JSX.Element | null\n  ) => {\n    setMenuDrilledIn((prevMenuDrilledIn) => {\n      const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);\n      return prevMenuDrilledIn.slice(0, indexOfMenuId);\n    });\n    setDrilldownPath((prevDrilldownPath) => {\n      const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);\n      return prevDrilldownPath.slice(0, indexOfMenuIdPath);\n    });\n    setActiveMenu(toMenuId);\n    setBreadcrumb(breadcrumb);\n  };\n\n  const setHeight = (menuId: string, height: number) => {\n    if (menuHeights[menuId] === undefined || (menuId !== 'breadcrumbs-rootMenu' && menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const startRolloutBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Start rollout</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const appGroupingBreadcrumb = (isOpen: boolean) => (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbItem isDropdown>\n        <Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'app')}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              badge={\n                <Badge isRead screenReaderText=\"additional item\">\n                  1\n                </Badge>\n              }\n              ref={toggleRef}\n              onClick={() => onToggle(true, 'app')}\n              isExpanded={isOpen}\n              variant=\"plainText\"\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem\n              key=\"dropdown-start\"\n              icon={\n                <Icon shouldMirrorRTL>\n                  <RhMicronsCaretLeftIcon />\n                </Icon>\n              }\n              onClick={(event: any) =>\n                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)\n              }\n            >\n              Start rollout\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Application Grouping</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const labelsBreadcrumb = (isOpen: boolean) => (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbItem isDropdown>\n        <Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'label')}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              badge={\n                <Badge isRead screenReaderText=\"additional item\">\n                  1\n                </Badge>\n              }\n              ref={toggleRef}\n              onClick={() => onToggle(true, 'label')}\n              isExpanded={isOpen}\n              variant=\"plainText\"\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem\n              key=\"dropdown-start\"\n              icon={\n                <Icon shouldMirrorRTL>\n                  <RhMicronsCaretLeftIcon />\n                </Icon>\n              }\n              onClick={(event: any) =>\n                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)\n              }\n            >\n              Start rollout\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Labels</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const pauseRolloutsBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Pause rollouts</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbItem isDropdown>\n        <Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-app')}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              badge={\n                <Badge isRead screenReaderText=\"additional item\">\n                  1\n                </Badge>\n              }\n              ref={toggleRef}\n              onClick={() => onToggle(true, 'pause-app')}\n              isExpanded={isOpen}\n              variant=\"plainText\"\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem\n              key=\"dropdown-pause\"\n              icon={\n                <Icon shouldMirrorRTL>\n                  <RhMicronsCaretLeftIcon />\n                </Icon>\n              }\n              onClick={(event: any) =>\n                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)\n              }\n            >\n              Pause rollouts\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Application Grouping</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbItem isDropdown>\n        <Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-label')}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              badge={\n                <Badge isRead screenReaderText=\"additional item\">\n                  1\n                </Badge>\n              }\n              ref={toggleRef}\n              onClick={() => onToggle(true, 'pause-label')}\n              isExpanded={isOpen}\n              variant=\"plainText\"\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem\n              key=\"dropdown-pause\"\n              icon={\n                <Icon shouldMirrorRTL>\n                  <RhMicronsCaretLeftIcon />\n                </Icon>\n              }\n              onClick={(event: any) =>\n                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)\n              }\n            >\n              Pause rollouts\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Labels</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  const addStorageBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem\n        component=\"button\"\n        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}\n      >\n        Root\n      </BreadcrumbItem>\n      <BreadcrumbHeading component=\"button\">Add storage</BreadcrumbHeading>\n    </Breadcrumb>\n  );\n\n  return (\n    <>\n      <Checkbox\n        label=\"Set max menu height\"\n        isChecked={withMaxMenuHeight}\n        onChange={(_event, checked) => onToggleMaxMenuHeight(checked)}\n        aria-label=\"Set max menu height checkbox\"\n        id=\"toggle-max-menu-height\"\n        name=\"toggle-max-menu-height\"\n      />\n      <br />\n      <Menu\n        id=\"breadcrumbs-rootMenu\"\n        containsDrilldown\n        drilldownItemPath={drilldownPath}\n        drilledInMenus={menuDrilledIn}\n        activeMenu={activeMenu}\n        onDrillIn={drillIn}\n        onDrillOut={() => drillOut}\n        onGetMenuHeight={setHeight}\n        isScrollable={withMaxMenuHeight}\n      >\n        {breadcrumb && (\n          <>\n            <MenuBreadcrumb>{breadcrumb}</MenuBreadcrumb>\n            <Divider />\n          </>\n        )}\n        <MenuContent menuHeight={`${menuHeights[activeMenu]}px`} maxMenuHeight={withMaxMenuHeight ? '100px' : 'auto'}>\n          <MenuList>\n            <MenuItem\n              itemId=\"group:start_rollout\"\n              direction=\"down\"\n              onClick={() => setBreadcrumb(startRolloutBreadcrumb)}\n              drilldownMenu={\n                <DrilldownMenu id=\"breadcrumbs-drilldownMenuStart\">\n                  <MenuItem\n                    itemId=\"group:app_grouping_start\"\n                    description=\"Groups A-G\"\n                    direction=\"down\"\n                    onClick={() => setBreadcrumb(appGroupingBreadcrumb(false))}\n                    drilldownMenu={\n                      <DrilldownMenu id=\"breadcrumbs-drilldownMenuStartGrouping\">\n                        <MenuItem itemId=\"group_a\">Group A (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_b\">Group B (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_c\">Group C (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_d\">Group D (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_e\">Group E (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_f\">Group F (start rollout)</MenuItem>\n                        <MenuItem itemId=\"group_g\">Group G (start rollout)</MenuItem>\n                      </DrilldownMenu>\n                    }\n                  >\n                    Application grouping (start rollout)\n                  </MenuItem>\n                  <MenuItem itemId=\"count\">Count (start rollout)</MenuItem>\n                  <MenuItem\n                    itemId=\"group:labels_start\"\n                    direction=\"down\"\n                    onClick={() => setBreadcrumb(labelsBreadcrumb(false))}\n                    drilldownMenu={\n                      <DrilldownMenu id=\"breadcrumbs-drilldownMenuStartLabels\">\n                        <MenuItem itemId=\"label_1\">Label 1 (start rollout)</MenuItem>\n                        <MenuItem itemId=\"label_2\">Label 2 (start rollout)</MenuItem>\n                        <MenuItem itemId=\"label_3\">Label 3 (start rollout)</MenuItem>\n                      </DrilldownMenu>\n                    }\n                  >\n                    Labels (start rollout)\n                  </MenuItem>\n                  <MenuItem itemId=\"annotations\">Annotations (start rollout)</MenuItem>\n                </DrilldownMenu>\n              }\n            >\n              Start rollout\n            </MenuItem>\n            <MenuItem\n              itemId=\"group:pause_rollout\"\n              direction=\"down\"\n              onClick={() => setBreadcrumb(pauseRolloutsBreadcrumb)}\n              drilldownMenu={\n                <DrilldownMenu id=\"breadcrumbs-drilldownMenuPause\">\n                  <MenuItem\n                    itemId=\"group:app_grouping\"\n                    description=\"Groups A-C\"\n                    direction=\"down\"\n                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}\n                    drilldownMenu={\n                      <DrilldownMenu id=\"breadcrumbs-drilldownMenuGrouping\">\n                        <MenuItem itemId=\"group_a\">Group A (pause rollouts)</MenuItem>\n                        <MenuItem itemId=\"group_b\">Group B (pause rollouts)</MenuItem>\n                        <MenuItem itemId=\"group_c\">Group C (pause rollouts)</MenuItem>\n                      </DrilldownMenu>\n                    }\n                  >\n                    Application grouping (pause rollouts)\n                  </MenuItem>\n                  <MenuItem itemId=\"count\">Count (pause rollouts)</MenuItem>\n                  <MenuItem\n                    itemId=\"group:labels\"\n                    direction=\"down\"\n                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}\n                    drilldownMenu={\n                      <DrilldownMenu id=\"breadcrumbs-drilldownMenuLabels\">\n                        <MenuItem itemId=\"label_1\">Label 1 (pause rollouts)</MenuItem>\n                        <MenuItem itemId=\"label_2\">Label 2 (pause rollouts)</MenuItem>\n                        <MenuItem itemId=\"label_3\">Label 3 (pause rollouts)</MenuItem>\n                      </DrilldownMenu>\n                    }\n                  >\n                    Labels (pause rollouts)\n                  </MenuItem>\n                  <MenuItem itemId=\"annotations\">Annotations (pause rollouts)</MenuItem>\n                </DrilldownMenu>\n              }\n            >\n              Pause rollouts\n            </MenuItem>\n            <MenuItem\n              itemId=\"group:storage\"\n              icon={<RhUiStorageDomainFillIcon />}\n              direction=\"down\"\n              onClick={() => setBreadcrumb(addStorageBreadcrumb)}\n              drilldownMenu={\n                <DrilldownMenu id=\"breadcrumbs-drilldownMenuStorage\">\n                  <MenuItem icon={<RhUiBranchFillIcon />} itemId=\"git\">\n                    From git\n                  </MenuItem>\n                  <MenuItem icon={<RhUiServerStackFillIcon />} itemId=\"container\">\n                    Container image\n                  </MenuItem>\n                  <MenuItem icon={<CubeIcon />} itemId=\"docker\">\n                    Docker file\n                  </MenuItem>\n                </DrilldownMenu>\n              }\n            >\n              Add storage\n            </MenuItem>\n            <MenuItem itemId=\"edit\">Edit</MenuItem>\n            <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n          </MenuList>\n        </MenuContent>\n      </Menu>\n    </>\n  );\n};\n","title":"With drilldown breadcrumbs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use `}
+        
+        <PatternflyThemeLink {...{"to":"/components/breadcrumb","className":""}}>
+          {`breadcrumbs`}
+        </PatternflyThemeLink>
+        {` when a drilldown menu has more than 2 levels to offer users better navigation.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To control the height of a menu, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`maxMenuHeight`}
+        </code>
+        {` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.`}
+      </p>
+    </Example>,
+  'With drilldown and inline filter': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, useState } from 'react';\nimport {\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  Divider,\n  DrilldownMenu,\n  MenuSearch,\n  MenuSearchInput,\n  SearchInput\n} from '@patternfly/react-core';\n\nexport const MenuWithDrilldown: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);\n  const [menuHeights, setMenuHeights] = useState<any>({});\n  const [activeMenu, setActiveMenu] = useState<string>('filter_drilldown-rootMenu');\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) => {\n    if (\n      menuHeights[menuId] === undefined ||\n      (menuId !== 'filter_drilldown-rootMenu' && menuHeights[menuId] !== height)\n    ) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  const searchRef = createRef<HTMLInputElement>();\n  const [startInput, setStartInput] = useState('');\n\n  const handleStartTextInputChange = (value: string) => {\n    setStartInput(value);\n    searchRef?.current?.focus();\n  };\n\n  const startDrillItems = [\n    {\n      item: 'Application grouping',\n      rest: { description: 'Description text' }\n    },\n    { item: 'Labels' },\n    { item: 'Annotations' },\n    { item: 'Count' },\n    { item: 'Count 2' },\n    { item: 'Count 3' },\n    { item: 'Other' }\n  ];\n\n  const mapped = startDrillItems\n    .filter((opt) => !startInput || opt.item.toLowerCase().includes(startInput.toString().toLowerCase()))\n    .map((opt, index) => (\n      <MenuItem key={opt.item} itemId={index} {...opt.rest}>\n        {opt.item}\n      </MenuItem>\n    ));\n  if (startInput && mapped.length === 0) {\n    mapped.push(\n      <MenuItem isDisabled key=\"no result\">\n        No results found\n      </MenuItem>\n    );\n  }\n\n  return (\n    <Menu\n      id=\"filter_drilldown-rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"filter_group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"filter_drilldown-drilldownMenuStart\">\n                <MenuItem itemId=\"filter_group:start_rollout_breadcrumb\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuSearch>\n                  <MenuSearchInput>\n                    <SearchInput\n                      ref={searchRef}\n                      value={startInput}\n                      aria-label=\"Filter menu items\"\n                      onChange={(_event, value) => handleStartTextInputChange(value)}\n                      onClear={() => handleStartTextInputChange('')}\n                    />\n                  </MenuSearchInput>\n                </MenuSearch>\n                <Divider component=\"li\" />\n                {mapped}\n              </DrilldownMenu>\n            }\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem itemId=\"item-a\">Item B</MenuItem>\n          <MenuItem itemId=\"item-b\">Item C</MenuItem>\n          <MenuItem itemId=\"item-c\">Item D</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n};\n","title":"With drilldown and inline filter","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic menus"])}
+    {React.createElement(pageData.examples["Danger menu item"])}
+    {React.createElement(pageData.examples["With icons"])}
+    {React.createElement(pageData.examples["With actions"])}
+    {React.createElement(pageData.examples["With links"])}
+    {React.createElement(pageData.examples["With descriptions"])}
+    {React.createElement(pageData.examples["Item checkbox"])}
+    {React.createElement(pageData.examples["Menu footer"])}
+    {React.createElement(pageData.examples["Separated items"])}
+    {React.createElement(pageData.examples["Titled groups of items"])}
+    {React.createElement(pageData.examples["With favorites"])}
+    {React.createElement(pageData.examples["Filtering with search input"])}
+    {React.createElement(pageData.examples["Option single select menu"])}
+    {React.createElement(pageData.examples["Option multi select menu"])}
+    {React.createElement(pageData.examples["Scrollable menus"])}
+    {React.createElement(pageData.examples["Scrollable menu with custom height"])}
+    {React.createElement(pageData.examples["With view more"])}
+    {React.createElement(pageData.examples["With drilldown"])}
+    {React.createElement(pageData.examples["Initially drilled-in menu"])}
+    {React.createElement(pageData.examples["With drilldown - submenu functions"])}
+    {React.createElement(pageData.examples["With drilldown breadcrumbs"])}
+    {React.createElement(pageData.examples["With drilldown and inline filter"])}
+    <AutoLinkHeader {...{"id":"using-router-links","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Using router links`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Router links can be used for in-app linking in React environments to prevent page reloading. To use a `}
+      <code {...{"className":"ws-code "}}>
+        {`Link`}
+      </code>
+      {` component from a router package, you can pass a callback to the `}
+      <code {...{"className":"ws-code "}}>
+        {`component`}
+      </code>
+      {` property of the `}
+      <code {...{"className":"ws-code "}}>
+        {`MenuItem`}
+      </code>
+      {`:`}
+    </p>
+    <Example {...{"code":"<MenuItem\n  component={(props) => <Link {...props} to=\"#\" />}\n>\n  {...Link Content}\n</MenuItem>","lang":"nolive","className":""}}>
+    </Example>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusMenuReactDocs';
+Component.pageData = pageData;
+
+export default Component;