@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/Label/Label.tsx

@@ -24,9 +24,9 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
   editableProps?: any;
   /** @beta Callback when an editable label completes an edit. */
-  onEditComplete?: (newText: string) => void;
+  onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
   /** @beta Callback when an editable label cancels an edit. */
-  onEditCancel?: (previousText: string) => void;
+  onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
   /** Flag indicating the label text should be truncated. */
   isTruncated?: boolean;
   /** Position of the tooltip which is displayed if text is truncated */
@@ -126,7 +126,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       !editableInputRef.current.contains(event.target as Node)
     ) {
       if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(editableInputRef.current.value);
+        onEditComplete && onEditComplete(event, editableInputRef.current.value);
       }
       setIsEditableActive(false);
     }
@@ -148,7 +148,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       event.preventDefault();
       event.stopImmediatePropagation();
       if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(editableInputRef.current.value);
+        onEditComplete && onEditComplete(event, editableInputRef.current.value);
       }
       setIsEditableActive(false);
       editableButtonRef?.current?.focus();
@@ -159,7 +159,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       // Reset div text to initial children prop - pre-edit
       if (editableInputRef.current.value) {
         editableInputRef.current.value = children as string;
-        onEditCancel && onEditCancel(children as string);
+        onEditCancel && onEditCancel(event, children as string);
       }
       setIsEditableActive(false);
       editableButtonRef?.current?.focus();

package/src/components/Label/examples/LabelEditable.tsx

@@ -5,19 +5,19 @@ export const LabelEditable: React.FunctionComponent = () => {
   const [labelText, setLabelText] = React.useState('Editable label');
   const [compactLabelText, setCompactLabelText] = React.useState('Compact editable label');
 
-  const onEditCancel = (prevText: string) => {
+  const onEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setLabelText(prevText);
   };
 
-  const onEditComplete = (text: string) => {
+  const onEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {
     setLabelText(text);
   };
 
-  const onCompactEditCancel = (prevText: string) => {
+  const onCompactEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setCompactLabelText(prevText);
   };
 
-  const onCompactEditComplete = (text: string) => {
+  const onCompactEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {
     setCompactLabelText(text);
   };
 

package/src/components/LabelGroup/LabelGroup.tsx

@@ -156,15 +156,14 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       ...rest
     } = this.props;
     const { isOpen } = this.state;
-    const numChildren = React.Children.count(children);
+    const renderedChildren = React.Children.toArray(children);
+    const numChildren = renderedChildren.length;
     const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: React.Children.count(children) - numLabels
+      remaining: numChildren - numLabels
     });
 
     const renderLabelGroup = (id: string) => {
-      const labelArray = !isOpen
-        ? React.Children.toArray(children).slice(0, numLabels)
-        : React.Children.toArray(children);
+      const labelArray = !isOpen ? renderedChildren.slice(0, numLabels) : renderedChildren;
 
       const content = (
         <React.Fragment>

package/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx

@@ -67,8 +67,8 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
           id={label.id}
           color="blue"
           onClose={() => onClose(label.id)}
-          onEditCancel={prevText => onEdit(prevText, index)}
-          onEditComplete={newText => onEdit(newText, index)}
+          onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+          onEditComplete={(_event, newText) => onEdit(newText, index)}
           {...label.props}
         >
           {label.name}

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -130,8 +130,8 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
             id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
-            onEditCancel={prevText => onEdit(prevText, index)}
-            onEditComplete={newText => onEdit(newText, index)}
+            onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+            onEditComplete={(_event, newText) => onEdit(newText, index)}
             {...label.props}
           >
             {label.name}

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -247,8 +247,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
             id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
-            onEditCancel={prevText => onEdit(prevText, index)}
-            onEditComplete={newText => onEdit(newText, index)}
+            onEditCancel={(_event, prevText) => onEdit(prevText, index)}
+            onEditComplete={(_event, newText) => onEdit(newText, index)}
             {...label.props}
           >
             {label.name}

package/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx

@@ -11,8 +11,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel1(prevText)}
-        onEditComplete={newText => setLabel1(newText)}
+        onEditCancel={(_event, prevText) => setLabel1(prevText)}
+        onEditComplete={(_event, newText) => setLabel1(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label1}`,
@@ -25,8 +25,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel2(prevText)}
-        onEditComplete={newText => setLabel2(newText)}
+        onEditCancel={(_event, prevText) => setLabel2(prevText)}
+        onEditComplete={(_event, newText) => setLabel2(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label2}`,
@@ -38,8 +38,8 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       <Label
         color="blue"
         onClose={() => Function.prototype}
-        onEditCancel={prevText => setLabel3(prevText)}
-        onEditComplete={newText => setLabel3(newText)}
+        onEditCancel={(_event, prevText) => setLabel3(prevText)}
+        onEditComplete={(_event, newText) => setLabel3(newText)}
         isEditable
         editableProps={{
           'aria-label': `Editable label with text ${label3}`,

package/src/components/LoginPage/LoginPage.tsx

@@ -35,7 +35,7 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   loginTitle: string;
   /** Subtitle for the login main body header of the login page */
   loginSubtitle?: string;
-  /** @beta Header utilities for the login main body header of the login page */
+  /** Header utilities for the login main body header of the login page */
   headerUtilities?: React.ReactNode;
   /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;

package/src/components/Menu/Menu.tsx

@@ -40,9 +40,14 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   /** @beta Array of menus that are drilled in */
   drilledInMenus?: string[];
   /** @beta Callback for drilling into a submenu */
-  onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
+  onDrillIn?: (
+    event: React.KeyboardEvent | React.MouseEvent,
+    fromItemId: string,
+    toItemId: string,
+    itemId: string
+  ) => void;
   /** @beta Callback for drilling out of a submenu */
-  onDrillOut?: (toItemId: string, itemId: string) => void;
+  onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
   /** @beta Callback for collecting menu heights */
   onGetMenuHeight?: (menuId: string, height: number) => void;
   /** @beta ID of parent menu for drilldown menus */
@@ -63,6 +68,9 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   ouiaId?: number | string;
   /** 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. */
   ouiaSafe?: boolean;
+  /** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
+   * one or more items selected, pass in "listbox". */
+  role?: string;
 }
 
 export interface MenuState {
@@ -84,7 +92,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     ouiaSafe: true,
     isRootMenu: true,
     isPlain: false,
-    isScrollable: false
+    isScrollable: false,
+    role: 'menu'
   };
 
   constructor(props: MenuProps) {
@@ -267,6 +276,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       innerRef,
       isRootMenu,
       activeMenu,
+      role,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -287,7 +297,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           onGetMenuHeight,
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
-          disableHover: this.state.disableHover
+          disableHover: this.state.disableHover,
+          role
         }}
       >
         {isRootMenu && (

package/src/components/Menu/MenuContext.ts

@@ -9,12 +9,18 @@ export const MenuContext = React.createContext<{
   selected?: any | any[];
   drilldownItemPath?: string[];
   drilledInMenus?: string[];
-  onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
-  onDrillOut?: (toItemId: string, itemId: string) => void;
+  onDrillIn?: (
+    event: React.KeyboardEvent | React.MouseEvent,
+    fromItemId: string,
+    toItemId: string,
+    itemId: string
+  ) => void;
+  onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
   onGetMenuHeight?: (menuId: string, height: number) => void;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
   disableHover?: boolean;
+  role?: string;
 }>({
   menuId: null,
   parentMenu: null,
@@ -29,7 +35,8 @@ export const MenuContext = React.createContext<{
   onGetMenuHeight: () => null,
   flyoutRef: null,
   setFlyoutRef: () => null,
-  disableHover: false
+  disableHover: false,
+  role: 'menu'
 });
 
 export const MenuItemContext = React.createContext<{

package/src/components/Menu/MenuGroup.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
-export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
+export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Items within group */
   children?: React.ReactNode;
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: string;
+  label?: React.ReactNode;
   /** ID for title label */
   titleId?: string;
   /** Forwarded ref */
@@ -25,16 +25,23 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
-}: MenuGroupProps) => (
-  <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
-    {label && (
-      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
-        {label}
-      </HeadingLevel>
-    )}
-    {children}
-  </section>
-);
+}: MenuGroupProps) => {
+  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  return (
+    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+      <>
+        {['function', 'string'].includes(typeof label) ? (
+          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+            {label}
+          </Wrapper>
+        ) : (
+          label
+        )}
+        {children}
+      </>
+    </section>
+  );
+};
 
 export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />

package/src/components/Menu/MenuItem.tsx

@@ -114,7 +114,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     onDrillOut,
     flyoutRef,
     setFlyoutRef,
-    disableHover
+    disableHover,
+    role: menuRole
   } = React.useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
   if (hasCheckbox && !to) {
@@ -224,12 +225,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     onClick && onClick(event);
   };
   const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
-  let _drill: () => void;
+  let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
   if (direction) {
     if (direction === 'down') {
-      _drill = () =>
+      drill = event =>
         onDrillIn &&
         onDrillIn(
+          event,
           menuId,
           typeof drilldownMenu === 'function'
             ? (drilldownMenu() as any).props.id
@@ -237,7 +239,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           itemId
         );
     } else {
-      _drill = () => onDrillOut && onDrillOut(parentMenu, itemId);
+      drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
     }
   }
   let additionalProps = {} as any;
@@ -289,6 +291,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       setFlyoutRef(null);
     }
   };
+  const isSelectMenu = menuRole === 'listbox';
 
   return (
     <li
@@ -315,12 +318,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
             {...(!hasCheckbox && { disabled: isDisabled })}
-            {...(!hasCheckbox && !flyoutMenu && { role: 'menuitem' })}
+            {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
+            {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
             ref={innerRef}
             {...(!hasCheckbox && {
-              onClick: (event: any) => {
+              onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 onItemSelect(event, onSelect);
-                _drill && _drill();
+                drill && drill(event);
                 flyoutMenu && handleFlyout(event);
               }
             })}

package/src/components/Menu/MenuItemAction.tsx

@@ -12,7 +12,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
   /** Callback on action click, can also specify onActionClick on the Menu instead */
   onClick?: (event?: any) => void;
   /** Accessibility label */
-  'aria-label'?: string;
+  'aria-label': string;
   /** Flag indicating if the item is favorited */
   isFavorited?: boolean;
   /** Disables action, can also be specified on the MenuItem instead */

package/src/components/Menu/MenuList.tsx

@@ -1,21 +1,36 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
+import { MenuContext } from './MenuContext';
 
 export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
   /** Anything that can be rendered inside of menu list */
   children: React.ReactNode;
   /** Additional classes added to the menu list */
   className?: string;
+  /** @beta Indicates to assistive technologies whether more than one item can be selected
+   * for a non-checkbox menu. Only applies when the menu's role is "listbox".
+   */
+  isAriaMultiselectable?: boolean;
 }
 
 export const MenuList: React.FunctionComponent<MenuListProps> = ({
   children = null,
   className,
+  isAriaMultiselectable = false,
   ...props
-}: MenuListProps) => (
-  <ul role="menu" className={css(styles.menuList, className)} {...props}>
-    {children}
-  </ul>
-);
+}: MenuListProps) => {
+  const { role } = React.useContext(MenuContext);
+
+  return (
+    <ul
+      role={role}
+      {...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
+      className={css(styles.menuList, className)}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
 MenuList.displayName = 'MenuList';

package/src/components/Menu/examples/Menu.md

@@ -18,114 +18,177 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 
 ## Examples
 
-### Basic
+### Basic menus
+
+A menu may contain multiple variations of `<MenuItem>` components. The following example shows a few different states of menu items, where they may:
+
+- Use the `itemId` property to link to callbacks. In this example, the `onSelect` property logs information to the console when a menu item is selected. In practice, specific actions can be linked to `onSelect` callbacks.
+- Use the `to` property to direct users to other resources or webpages after selecting a menu item, and the `onClick` property to pass in a callback for specific menu items.
+- Use the `isDisabled` property to disable a menu item.
+- Use the `isPlain` property to remove the outer box shadow and style the menu plainly instead.
 
 ```ts file="MenuBasic.tsx"
 ```
 
 ### Danger menu item
 
+To indicate that a `<MenuItem>` is connected to a potentially destructive action, use the `isDanger` property. The "Delete" item in the following example demonstrates how danger items look.
+
 ```ts file="MenuDangerMenuItem.tsx"
 ```
 
 ### With icons
 
+Use the `icon` property to add a familiar icon before a `<MenuItem>` to accelerate text label recognition.
+
 ```ts file="MenuWithIcons.tsx"
 ```
 
-### With checkbox
+### With actions
+
+To connect a menu item to an action icon, add a `<MenuItemAction>` to a `<MenuItem>`, and use the `icon` property to load an easily recognizable icon.
 
-```ts file="./MenuWithCheckbox.tsx"
-```
+To trigger an action when any menu action icon is selected, pass a callback to the `onActionClick` property of the `<Menu>`. The following example logs to the console any time any action icon is selected.
 
-### Filtering with search input
+To trigger an action when a specific item's action icon is selected, pass in the `onClick` property to that `<MenuItemAction>`. The following example logs "clicked on code icon" to the console when the "code" icon is selected.
 
-```ts file="MenuFilteringWithSearchInput.tsx"
+```ts file="MenuWithActions.tsx"
 ```
 
 ### With links
 
+Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` 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.
+
 ```ts file="MenuWithLinks.tsx"
 ```
 
-### With separator(s)
+### With descriptions
 
-```ts file="MenuWithSeparators.tsx"
+Use the `description` property to add short descriptive text below any menu item that needs additional context.
+
+```ts file="MenuWithDescription.tsx"
 ```
 
-### With titled groups
+### Item checkbox
 
-```ts file="MenuWithTitledGroups.tsx"
+Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
+
+```ts file="./MenuWithCheckbox.tsx" isBeta
 ```
 
-### With description
+### Menu footer
 
-```ts file="MenuWithDescription.tsx"
+Add a `<MenuFooter>` that contains separate, but related actions at the bottom of a menu.
+
+```ts file="MenuWithFooter.tsx"
 ```
 
-### With actions
+### Separated items
 
-```ts file="MenuWithActions.tsx"
+Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use the `component` property to specify the type of divider component to use.
+
+```ts file="MenuWithSeparators.tsx"
+```
+
+### Titled groups of items
+
+Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to title a group of menu items. Use the `labelHeadingLevel` property to assign a heading level to the menu group label.
+
+```ts file="MenuWithTitledGroups.tsx"
 ```
 
 ### With favorites
 
+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 `isFavorited` property identifies items that a user has favorited.
+
 ```ts file="MenuWithFavorites.tsx"
 ```
 
-### Option single select
+### Filtering with search input
+
+A [search input](/components/search-input) component can be placed within `<MenuInput>` to render a search input at the top of the menu. In the following example, the `onChange` property of the text input is passed a callback that filters menu items as a user types.
+
+```ts file="MenuFilteringWithSearchInput.tsx"
+```
+
+### Option single select menu
+
+The following example demonstrates a single option select menu that persists a selected menu item. Use the `selected` property on the `<Menu>` to label a selected item with a checkmark. You can also use the `isSelected` property on a `<MenuItem>` to indicate that it is selected.
+
+You must also use the `role` property on the `<Menu>` with a value of `"listbox"` when using a non-checkbox select menu.
 
 ```ts file="MenuOptionSingleSelect.tsx"
 ```
 
-### Option multi select
+### Option multi select menu
+
+To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected `itemId` to the `selected` property on the `<Menu>`, and pass the `isAriaMultiselectable` property on the `<MenuList>`.
+
+Similar to a single select menu, you must also pass `role="listbox"` to the `<Menu>`.
 
 ```ts file="MenuOptionMultiSelect.tsx"
 ```
 
-### With drilldown
+### Scrollable menus
 
-```ts file="./MenuWithDrilldown.tsx" isBeta
+Use the `isScrollable` property to make a long `<Menu>` scrollable and visually condensed.
+
+```ts file="MenuScrollable.tsx"
 ```
 
-### With drilldown - initial drill in state
+### Scrollable menu with custom height
 
-To render an initially drilled in menu, the `menuDrilledIn`, `drilldownPath`, and `activeMenu` states must be set to an initial state. The `menuHeights` state must also be set, defining the height of the root menu. The `setHeight` function passed into the `onGetMenuHeight` property must also account for updating heights, other than the root menu, as menus drill in and out of view.
+Adjust the visual size of a scrollable menu by using the `menuHeight` property within `<MenuContent>`. This example adjusts the height to 200px.
 
-```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
+```ts file="MenuScrollableCustomMenuHeight.tsx"
 ```
 
-### With drilldown - submenu functions
+### With view more
 
-```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
-```
+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 `onClick` property that will render additional menu items.
 
-### With drilldown breadcrumbs
+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.
 
-```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
+```ts file="MenuWithViewMore.tsx"
 ```
 
-### With drilldown and inline filter
+### With drilldown
 
-```ts file="MenuFilterDrilldown.tsx"
+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.
+
+- To indicate that a menu contains a drilldown, use the `containsDrilldown` property.
+- To indicate the path of drilled-in menu item ids, use the `drilldownItemPath` property.
+- Pass in an array of drilled-in menus with the `drilledInMenus` property.
+- Use the `onDrillIn` and `onDrillOut` properties to contain callbacks for drilling into and drilling out of a submenu, respectively.
+- To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.
+
+```ts file="./MenuWithDrilldown.tsx" isBeta
 ```
 
-### Scrollable
+### Initially drilled-in menu
 
-```ts file="MenuScrollable.tsx"
+To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
+
+```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
 ```
 
-### Scrollable with custom menu height
+### With drilldown - submenu functions
 
-```ts file="MenuScrollableCustomMenuHeight.tsx"
+For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.
+
+```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
 ```
 
-### With footer
+### With drilldown breadcrumbs
 
-```ts file="MenuWithFooter.tsx"
+Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2 levels to offer users better navigation.
+
+To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
+
+```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
 ```
 
-### With view more
+### With drilldown and inline filter
 
-```ts file="MenuWithViewMore.tsx"
+```ts file="MenuFilterDrilldown.tsx"
 ```