Adds content to menu react examples (#8018)

* Starts menu content edits.

* Content updates and rewording.

* Update packages/react-core/src/components/Menu/examples/Menu.md

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

* Adds submenu context and makes a few edits.

* Adds content to with drilldown breadcumbs example and reorganizes.

* Adds danger item content and adds in missing back ticks.

* Content edits.

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Co-authored-by: Nicole Thoen <nthoen@redhat.com>

Author: 3 people

packages/react-core/src/components/Menu/examples/Menu.md

@@ -18,114 +18,173 @@ 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.
 
 ```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.
 
 ```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. 
 
-### Scrollable
+- 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="MenuScrollable.tsx"
+```ts file="./MenuWithDrilldown.tsx" isBeta
 ```
 
-### Scrollable with custom menu height
+### Initially drilled-in menu
 
-```ts file="MenuScrollableCustomMenuHeight.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
 ```
 
-### With footer
+### With drilldown - submenu functions
 
-```ts file="MenuWithFooter.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 view more
+### With drilldown breadcrumbs
 
-```ts file="MenuWithViewMore.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 drilldown and inline filter
+
+```ts file="MenuFilterDrilldown.tsx"
+```