@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/masthead/react

@@ -0,0 +1,67 @@
+To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.
+
+Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains the page's header toolbar within `<MastheadContent>`.
+
+## Examples
+
+### Basic
+
+
+import MastheadBasic from "./MastheadBasic.tsx?raw"
+
+<LiveExample src={MastheadBasic} />
+
+### Basic with mixed content
+
+
+import MastheadBasicMixedContent from "./MastheadBasicMixedContent.tsx?raw"
+
+<LiveExample src={MastheadBasicMixedContent} />
+
+### Display inline
+
+
+import MastheadDisplayInline from "./MastheadDisplayInline.tsx?raw"
+
+<LiveExample src={MastheadDisplayInline} />
+
+### Display stack
+
+
+import MastheadDisplayStack from "./MastheadDisplayStack.tsx?raw"
+
+<LiveExample src={MastheadDisplayStack} />
+
+### Display stack, display inline responsive
+
+
+import MastheadDisplayStackInlineResponsive from "./MastheadDisplayStackInlineResponsive.tsx?raw"
+
+<LiveExample src={MastheadDisplayStackInlineResponsive} />
+
+### Inset
+
+
+import MastheadInsets from "./MastheadInsets.tsx?raw"
+
+<LiveExample src={MastheadInsets} />
+
+### Custom logo component
+
+In addition to being able to pass a string to the `component` property of `MastheadLogo`, you can provide more fine-tuned customization by passing a callback that returns a component.
+
+
+
+import MastheadLogoCustomComponent from "./MastheadLogoCustomComponent.tsx?raw"
+
+<LiveExample src={MastheadLogoCustomComponent} />
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom logo component example](#custom-logo-component) and pass a callback to the `component` property of the `MastheadLogo`:
+
+```
+<MastheadLogo component={(props) => <Link {...props} to="#" />}>
+  <Brand ...brandProps />
+</MastheadLogo>
+```

package/dist/docs/api/v6/components/menu/html

@@ -0,0 +1,363 @@
+import './Menu.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Danger menu item
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### With icons
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### With checkbox
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Scrollable
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Scrollable with custom menu height
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With flyout
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### With flyout menu top
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### With flyout menu left
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### With flyout menu left top
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Drilldown
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Drilldown level two
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Drilldown level three
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Drilldown level four
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Scrollable drilldown
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Width modified drilldown
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Drilldown with breadcrumbs - level 1
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Drilldown with breadcrumbs - level 2
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Drilldown with breadcrumbs - level 3
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+### Drilldown with breadcrumbs - level 4
+
+
+import Example20 from './Example20.html?raw'
+
+<LiveExample html={Example20} />
+
+{/*
+### Drilldown managed height
+```hbs
+{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
+```
+
+### Drilldown managed height level two
+```hbs
+{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-2" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 193px;"'}}
+```
+
+### Drilldown managed height level three
+```hbs
+{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-3" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 233px;"'}}
+```
+
+### Drilldown managed height level four
+```hbs
+{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-4" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--IsDrilledIn--list-3="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
+```
+
+### Drilldown with breadcrumbs and managed height - level 4
+```hbs
+{{#> menu menu--id="drilldown-with-breadcrumbs-and-managed-height-level-4" menu--modifier="pf-m-drilldown pf-m-drilled-in" menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
+  {{> menu-breadcrumbs--Drilldown breadcrumb--id="drilldown-with-breadcrumbs-level-4" menu-breadcrumbs--Drilldown--IsLevel4="true"}}
+  {{> menu-content--Breadcrumbs menu-content--Breadcrumbs--level2="true" menu-content--Breadcrumbs--level3="true" menu-content--Breadcrumbs--level4="true"}}
+{{/menu}}
+```
+*/}
+
+### Scrollable menu with header and footer
+
+
+import Example21 from './Example21.html?raw'
+
+<LiveExample html={Example21} />
+
+### Scrollable menu with search and footer
+
+
+import Example22 from './Example22.html?raw'
+
+<LiveExample html={Example22} />
+
+### With filtering
+
+
+import Example23 from './Example23.html?raw'
+
+<LiveExample html={Example23} />
+
+### With links
+
+
+import Example24 from './Example24.html?raw'
+
+<LiveExample html={Example24} />
+
+### With separator(s)
+
+
+import Example25 from './Example25.html?raw'
+
+<LiveExample html={Example25} />
+
+### With titled groups
+
+
+import Example26 from './Example26.html?raw'
+
+<LiveExample html={Example26} />
+
+### With description
+
+
+import Example27 from './Example27.html?raw'
+
+<LiveExample html={Example27} />
+
+### With actions
+
+
+import Example28 from './Example28.html?raw'
+
+<LiveExample html={Example28} />
+
+### With favorites
+
+
+import Example29 from './Example29.html?raw'
+
+<LiveExample html={Example29} />
+
+### Option single select
+
+
+import Example30 from './Example30.html?raw'
+
+<LiveExample html={Example30} />
+
+### Option multi-select
+
+
+import Example31 from './Example31.html?raw'
+
+<LiveExample html={Example31} />
+
+### View more
+
+
+import Example32 from './Example32.html?raw'
+
+<LiveExample html={Example32} />
+
+### Loading
+
+
+import Example33 from './Example33.html?raw'
+
+<LiveExample html={Example33} />
+
+### Footer
+
+
+import Example34 from './Example34.html?raw'
+
+<LiveExample html={Example34} />
+
+### Plain
+
+
+import Example35 from './Example35.html?raw'
+
+<LiveExample html={Example35} />
+
+### Plain with search and footer
+
+
+import Example36 from './Example36.html?raw'
+
+<LiveExample html={Example36} />
+
+### Plain scrollable with search and footer
+
+
+import Example37 from './Example37.html?raw'
+
+<LiveExample html={Example37} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `role="menu"` | `.pf-v6-c-menu__list` | Declares `.pf-v6-c-menu__list` as a menu. |
+| `disabled` | `button.pf-v6-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `role="menuitem"` | `.pf-v6-c-menu__item`, `.pf-v6-c-menu__list-item` (checkbox) | Assigns `.pf-v6-c-menu__item` as an option in a set of choices contained by a menu. |
+| `role="none"` | `.pf-v6-c-menu__list-item` | Removes semantic meaning from `.pf-v6-c-menu__list-item`. |
+| `aria-disabled="true"` | `.pf-v6-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
+| `tabindex="-1"` | `a.pf-v6-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. |
+| `aria-hidden="true"` | `.pf-v6-c-menu__item-icon`, `.pf-v6-c-menu__item-action-icon`, `.pf-v6-c-menu__item-external-icon`, `.pf-v6-c-menu__item-toggle-icon`, `.pf-v6-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
+| `aria-label="Descriptive text"` | `.pf-v6-c-menu__item-action-icon` | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. |
+| `aria-label="Not starred"` | `.pf-v6-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
+| `aria-label="Starred"` | `.pf-v6-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-menu` | `<div>` | Initiates the menu. **Required** |
+| `.pf-v6-c-menu__header` | `<div>` | Initiates the menu header container. |
+| `.pf-v6-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
+| `.pf-v6-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
+| `.pf-v6-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
+| `.pf-v6-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
+| `.pf-v6-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
+| `.pf-v6-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
+| `.pf-v6-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
+| `.pf-v6-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
+| `.pf-v6-c-menu__item-check` | `<span>` | Initiates a menu label. |
+| `.pf-v6-c-menu__item-description` | `<span>` | Initiates the menu item description. |
+| `.pf-v6-c-menu__item-group` | `<section>` | Initiates the menu item group. |
+| `.pf-v6-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
+| `.pf-v6-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
+| `.pf-v6-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
+| `.pf-v6-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
+| `.pf-v6-c-menu__item-action` | `<button>` | Initiates the menu item action. |
+| `.pf-v6-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
+| `.pf-v6-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
+| `.pf-v6-c-menu__footer` | `<div>` | Initiates the menu footer. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-favorite` | `.pf-v6-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
+| `.pf-m-favorited` | `.pf-v6-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
+| `.pf-m-selected` | `.pf-v6-c-menu__item` | Modifies the menu item to be selected. |
+| `.pf-m-drill-up` | `.pf-v6-c-menu__list-item` | Flags the menu item as a drill up button. |
+| `.pf-m-flyout` | `.pf-v6-c-menu` | Modifies the menu so that all nested `.pf-v6-c-menu` elements "flyout". |
+| `.pf-m-nav` | `.pf-v6-c-menu` | Modifies the menu for nav variant. |
+| `.pf-m-top` | `.pf-v6-c-menu` | Modifies a flyout menu to expand to the top. |
+| `.pf-m-left` | `.pf-v6-c-menu` | Modifies a flyout menu to expand to the left. |
+| `.pf-m-plain` | `.pf-v6-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
+| `.pf-m-scrollable` | `.pf-v6-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-v6-c-menu__content--MaxHeight`. |
+| `.pf-m-current` | `.pf-v6-c-menu__list-item` | Modifies a list item for current styles. |
+| `.pf-m-load` | `.pf-v6-c-menu__list-item` | Modifies a list item for "load more" styles. |
+| `.pf-m-loading` | `.pf-v6-c-menu__list-item` | Modifies a list item for loading styles. |
+| `.pf-m-disabled` | `.pf-v6-c-menu__item` | Modifies a list item for disabled styling. |
+| `.pf-m-aria-disabled` | `.pf-v6-c-menu__item` | Modifies a list item for aria-disabled styling. |
+| `.pf-m-drilldown` | `.pf-v6-c-menu` | Modifies the menu so that all nested `.pf-v6-c-menu` elements "drill down". |
+| `.pf-m-current-path` | `.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item` | Modifies the menu list item for current path state. |
+| `.pf-m-drilled-in` | `.pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu` | Modifies the menu list for drilled in state. |
+| `.pf-m-static` | `.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu` | Modifies the menu list for drilled static state. |
+| `.pf-m-danger` | `.pf-v6-c-menu__item-text` | Modifies a list item for danger styles. |
+| `--pf-v6-c-menu--Width: {width}` | `.pf-v6-c-menu` | Modifies the width of the menu. The default value is `auto`. |
+| `--pf-v6-c-menu__content--MaxHeight: {height}` | `.pf-v6-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
+| `--pf-v6-c-menu__content--Height: {height}` | `.pf-v6-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
+| `--pf-v6-c-menu--m-flyout__menu--top-offset` | `.pf-v6-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
+| `--pf-v6-c-menu--m-flyout__menu--left-offset` | `.pf-v6-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
+| `--pf-v6-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu` | Modifies the menu to allow for an offset to the right positioning. |

package/dist/docs/api/v6/components/menu/react

@@ -0,0 +1,232 @@
+## Examples
+
+### 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.
+
+
+import MenuBasic from "./MenuBasic.tsx?raw"
+
+<LiveExample src={MenuBasic} />
+
+### 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.
+
+
+import MenuDangerMenuItem from "./MenuDangerMenuItem.tsx?raw"
+
+<LiveExample src={MenuDangerMenuItem} />
+
+### With icons
+
+Use the `icon` property to add a familiar icon before a `<MenuItem>` to accelerate text label recognition.
+
+
+import MenuWithIcons from "./MenuWithIcons.tsx?raw"
+
+<LiveExample src={MenuWithIcons} />
+
+### 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.
+
+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.
+
+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.
+
+
+import MenuWithActions from "./MenuWithActions.tsx?raw"
+
+<LiveExample src={MenuWithActions} />
+
+### 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, as well as add `target="_blank"` so that the link opens in a new tab or window.
+
+
+import MenuWithLinks from "./MenuWithLinks.tsx?raw"
+
+<LiveExample src={MenuWithLinks} />
+
+### With descriptions
+
+Use the `description` property to add short descriptive text below any menu item that needs additional context.
+
+
+import MenuWithDescription from "./MenuWithDescription.tsx?raw"
+
+<LiveExample src={MenuWithDescription} />
+
+### Item checkbox
+
+Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
+
+
+import MenuWithCheckbox from "./MenuWithCheckbox.tsx?raw"
+
+<LiveExample src={MenuWithCheckbox} />
+
+### Menu footer
+
+Add a `<MenuFooter>` that contains separate, but related actions at the bottom of a menu.
+
+
+import MenuWithFooter from "./MenuWithFooter.tsx?raw"
+
+<LiveExample src={MenuWithFooter} />
+
+### Separated items
+
+Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use the `component` property to specify the type of divider component to use.
+
+
+import MenuWithSeparators from "./MenuWithSeparators.tsx?raw"
+
+<LiveExample src={MenuWithSeparators} />
+
+### 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.
+
+
+import MenuWithTitledGroups from "./MenuWithTitledGroups.tsx?raw"
+
+<LiveExample src={MenuWithTitledGroups} />
+
+### 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.
+
+
+import MenuWithFavorites from "./MenuWithFavorites.tsx?raw"
+
+<LiveExample src={MenuWithFavorites} />
+
+### Filtering with search input
+
+A [search input](/components/search-input) component can be placed within `<MenuSearch>` and `<MenuSearchInput>` 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.
+
+
+import MenuFilteringWithSearchInput from "./MenuFilteringWithSearchInput.tsx?raw"
+
+<LiveExample src={MenuFilteringWithSearchInput} />
+
+### 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.
+
+
+import MenuOptionSingleSelect from "./MenuOptionSingleSelect.tsx?raw"
+
+<LiveExample src={MenuOptionSingleSelect} />
+
+### 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>`.
+
+
+import MenuOptionMultiSelect from "./MenuOptionMultiSelect.tsx?raw"
+
+<LiveExample src={MenuOptionMultiSelect} />
+
+### Scrollable menus
+
+Use the `isScrollable` property to make a long `<Menu>` scrollable and visually condensed.
+
+
+import MenuScrollable from "./MenuScrollable.tsx?raw"
+
+<LiveExample src={MenuScrollable} />
+
+### Scrollable menu with custom height
+
+Adjust the visual size of a scrollable menu by using the `menuHeight` property within `<MenuContent>`. This example adjusts the height to 200px.
+
+
+import MenuScrollableCustomMenuHeight from "./MenuScrollableCustomMenuHeight.tsx?raw"
+
+<LiveExample src={MenuScrollableCustomMenuHeight} />
+
+### With view more
+
+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.
+
+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.
+
+
+import MenuWithViewMore from "./MenuWithViewMore.tsx?raw"
+
+<LiveExample src={MenuWithViewMore} />
+
+### With drilldown
+
+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.
+
+
+import MenuWithDrilldown from "./MenuWithDrilldown.tsx?raw"
+
+<LiveExample src={MenuWithDrilldown} />
+
+### Initially drilled-in menu
+
+To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
+
+
+import MenuWithDrilldownInitialState from "./MenuWithDrilldownInitialState.tsx?raw"
+
+<LiveExample src={MenuWithDrilldownInitialState} />
+
+### With drilldown - submenu functions
+
+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.
+
+
+import MenuWithDrilldownSubmenuFunctions from "./MenuWithDrilldownSubmenuFunctions.tsx?raw"
+
+<LiveExample src={MenuWithDrilldownSubmenuFunctions} />
+
+### With drilldown breadcrumbs
+
+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.
+
+
+import MenuWithDrilldownBreadcrumbs from "./MenuWithDrilldownBreadcrumbs.tsx?raw"
+
+<LiveExample src={MenuWithDrilldownBreadcrumbs} />
+
+### With drilldown and inline filter
+
+
+import MenuFilterDrilldown from "./MenuFilterDrilldown.tsx?raw"
+
+<LiveExample src={MenuFilterDrilldown} />
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can pass a callback to the `component` property of the `MenuItem`:
+
+```
+<MenuItem
+  component={(props) => <Link {...props} to="#" />}
+>
+  {...Link Content}
+</MenuItem>
+```