@splunk/react-ui 5.7.1 → 5.8.0

package/docs-llm/Menu.md

@@ -0,0 +1,735 @@
+# Menu
+
+## Examples
+
+
+### Basic
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Basic() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item>Line Chart</Menu.Item>
+            <Menu.Item>Area Chart</Menu.Item>
+            <Menu.Item>Column Chart</Menu.Item>
+            <Menu.Item>Bar Chart</Menu.Item>
+            <Menu.Item>Pie Chart</Menu.Item>
+            <Menu.Item>Scatter Chart</Menu.Item>
+            <Menu.Item>Bubble Chart</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Basic;
+```
+
+
+
+### Adornments
+
+A startAdornment and/or endAdornment can be added to a Menu.Item. Adornments should be decorative.
+
+```typescript
+import React from 'react';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartBar from '@splunk/react-icons/ChartBar';
+import ChartBubble from '@splunk/react-icons/ChartBubble';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import ChartPie from '@splunk/react-icons/ChartPie';
+import ChartScatter from '@splunk/react-icons/ChartScatter';
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Adornments() {
+    return (
+        <Menu focusMode="roving" style={{ width: 300 }}>
+            <Menu.Item startAdornment={<ChartLine />}>Line Chart</Menu.Item>
+            <Menu.Item startAdornment={<ChartArea />}>Area Chart</Menu.Item>
+            <Menu.Item startAdornment={<ChartColumn />}>Column Chart</Menu.Item>
+            <Menu.Item startAdornment={<ChartBar />}>Bar Chart</Menu.Item>
+            <Menu.Item startAdornment={<ChartPie />}>Pie Chart</Menu.Item>
+            <Menu.Item startAdornment={<ChartScatter />}>Scatter Chart</Menu.Item>
+            <Menu.Item endAdornment={<ChartBubble />}>Bubble Chart</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Adornments;
+```
+
+
+
+### Links
+
+Menu.Items can contain links by including a to attribute.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Links() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item to="Overview">Overview</Menu.Item>
+            <Menu.Item to="https://duckduckgo.com" openInNewContext>
+                Duck Duck Go
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default Links;
+```
+
+
+
+### Descriptions
+
+Descriptions can be placed below or to the right of the label. Defaults to descriptionPosition="bottom".
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Descriptions() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item description="Recommended" descriptionPosition="right">
+                Statistics
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item description="A map with overlaid circles">Cluster Map</Menu.Item>
+            <Menu.Item description="A map with colored regions">Choropleth Map</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Descriptions;
+```
+
+
+
+### Headings
+
+Menus can have headings to summarize the following items.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Headings() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Heading title>Reports</Menu.Heading>
+            <Menu.Divider />
+            <Menu.Item>Events</Menu.Item>
+            <Menu.Item>Statistics Table</Menu.Item>
+            <Menu.Heading>Chart</Menu.Heading>
+            <Menu.Item>Line Chart</Menu.Item>
+            <Menu.Item>Area Chart</Menu.Item>
+            <Menu.Item>Column Chart</Menu.Item>
+            <Menu.Item>Bar Chart</Menu.Item>
+            <Menu.Item>Pie Chart</Menu.Item>
+            <Menu.Item>Scatter Chart</Menu.Item>
+            <Menu.Item>Bubble Chart</Menu.Item>
+            <Menu.Heading>Value</Menu.Heading>
+            <Menu.Item>Single Value</Menu.Item>
+            <Menu.Item>Radial Gauge</Menu.Item>
+            <Menu.Item>Filler Gauge</Menu.Item>
+            <Menu.Item>Marker Gauge</Menu.Item>
+            <Menu.Heading>Map</Menu.Heading>
+            <Menu.Item>Cluster Map</Menu.Item>
+            <Menu.Item>Choropleth Map</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Headings;
+```
+
+
+
+### Dividers
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Dividers() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item>Events</Menu.Item>
+            <Menu.Item>Statistics Table</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item>Line Chart</Menu.Item>
+            <Menu.Item>Area Chart</Menu.Item>
+            <Menu.Item>Column Chart</Menu.Item>
+            <Menu.Item>Bar Chart</Menu.Item>
+            <Menu.Item>Pie Chart</Menu.Item>
+            <Menu.Item>Scatter Chart</Menu.Item>
+            <Menu.Item>Bubble Chart</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item>Single Value</Menu.Item>
+            <Menu.Item>Radial Gauge</Menu.Item>
+            <Menu.Item>Filler Gauge</Menu.Item>
+            <Menu.Item>Marker Gauge</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item>Cluster Map</Menu.Item>
+            <Menu.Item>Choropleth Map</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Dividers;
+```
+
+
+
+### Selectable and Selected
+
+Items can be selected or selectable, which ensures space is reserved for the checkmark.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Selectable() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item selectable>Line Chart</Menu.Item>
+            <Menu.Item selectable selected>
+                Area Chart
+            </Menu.Item>
+            <Menu.Item selectable>Column Chart</Menu.Item>
+            <Menu.Item selectable>Bar Chart</Menu.Item>
+            <Menu.Item selectable>Pie Chart</Menu.Item>
+            <Menu.Item selectable>Scatter Chart</Menu.Item>
+            <Menu.Item selectable>Bubble Chart</Menu.Item>
+        </Menu>
+    );
+}
+
+export default Selectable;
+```
+
+
+
+### Selectable and Selected Checkboxes
+
+A Menu.Item's selected indicator can appear as a checkmark (default) or a checkbox with the `selectableAppearance` prop. Use a checkmark when only one Item can be selected, and a checkbox when multiple can be selected.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+
+function SelectableCheckbox() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item selectableAppearance="checkbox" selectable selected>
+                Line Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable selected>
+                Area Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable selected>
+                Column Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable>
+                Bar Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable>
+                Pie Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable>
+                Scatter Chart
+            </Menu.Item>
+            <Menu.Item selectableAppearance="checkbox" selectable>
+                Bubble Chart
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default SelectableCheckbox;
+```
+
+
+
+### Selectable and Selected with Adornments
+
+Items with adornments can be selected or selectable.
+
+```typescript
+import React from 'react';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartBar from '@splunk/react-icons/ChartBar';
+import ChartBubble from '@splunk/react-icons/ChartBubble';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import ChartPie from '@splunk/react-icons/ChartPie';
+import ChartScatter from '@splunk/react-icons/ChartScatter';
+import Menu from '@splunk/react-ui/Menu';
+
+
+function SelectableWithAdornments() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item selectable startAdornment={<ChartLine />}>
+                Line Chart
+            </Menu.Item>
+            <Menu.Item selectable selected startAdornment={<ChartArea />}>
+                Area Chart
+            </Menu.Item>
+            <Menu.Item selectable startAdornment={<ChartColumn />}>
+                Column Chart
+            </Menu.Item>
+            <Menu.Item selectable startAdornment={<ChartBar />}>
+                Bar Chart
+            </Menu.Item>
+            <Menu.Item selectable startAdornment={<ChartPie />}>
+                Pie Chart
+            </Menu.Item>
+            <Menu.Item selectable startAdornment={<ChartScatter />}>
+                Scatter Chart
+            </Menu.Item>
+            <Menu.Item selectable startAdornment={<ChartBubble />}>
+                Bubble Chart
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default SelectableWithAdornments;
+```
+
+
+
+### Truncation
+
+Labels that are too long can be optionally constrained to one line and truncated.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Truncate() {
+    const longLabel = 'A very long label truncation truncation truncation truncation truncation';
+
+    return (
+        <Menu style={{ maxWidth: 200 }}>
+            <Menu.Item truncate>{longLabel}</Menu.Item>
+            <Menu.Item truncate>{longLabel}</Menu.Item>
+            <Menu.Item>{longLabel}</Menu.Item>
+            <Menu.Item>{longLabel}</Menu.Item>
+            <Menu.Item>
+                aVeryLongLabelWordWordWordWordWordWordWordWordWordWordWordWordWord
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default Truncate;
+```
+
+
+
+### Dimmed
+
+Rendering a 'dimmed' Menu Item ensures the Menu Item is still discoverable and can receive focus, but the Menu Item cannot not be activated by the user.
+
+```typescript
+import React from 'react';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import Table from '@splunk/react-icons/Table';
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Dimmed() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item
+                startAdornment={<Table />}
+                selectable
+                description="Recommended"
+                descriptionPosition="right"
+                disabled
+            >
+                Statistics Table
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item startAdornment={<ChartLine />} selectable disabled>
+                Line Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartArea />} selectable>
+                Area Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartColumn />} selectable disabled>
+                Column Chart
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default Dimmed;
+```
+
+
+
+### Disabled
+
+Consider using a 'dimmed' Menu Item. Disabling Menu Items creates barriers for all users and can exclude people with disabilities. If necessary, a Menu Item can be completely disabled by setting disabled='disabled'. In these cases, consider contacting us to collaborate on alternatives for a more inclusive experience.
+
+```typescript
+import React from 'react';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartBar from '@splunk/react-icons/ChartBar';
+import ChartBubble from '@splunk/react-icons/ChartBubble';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import ChartPie from '@splunk/react-icons/ChartPie';
+import ChartScatter from '@splunk/react-icons/ChartScatter';
+import Table from '@splunk/react-icons/Table';
+import Menu from '@splunk/react-ui/Menu';
+
+
+function Disabled() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item
+                startAdornment={<Table />}
+                selectable
+                description="Recommended"
+                descriptionPosition="right"
+                disabled="disabled"
+            >
+                Statistics Table
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item startAdornment={<ChartLine />} selectable>
+                Line Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartArea />} selectable disabled="disabled">
+                Area Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartColumn />} selectable>
+                Column Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartBar />} selectable>
+                Bar Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartPie />} selectable disabled="disabled">
+                Pie Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartScatter />} selectable disabled="disabled">
+                Scatter Chart
+            </Menu.Item>
+            <Menu.Item startAdornment={<ChartBubble />} selectable disabled="disabled">
+                Bubble Chart
+            </Menu.Item>
+        </Menu>
+    );
+}
+
+export default Disabled;
+```
+
+
+
+### Complex
+
+All the options can be used together. Additional props, such as hasSubmenu, are detailed in the following example.
+
+```typescript
+import React from 'react';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartBar from '@splunk/react-icons/ChartBar';
+import ChartBubble from '@splunk/react-icons/ChartBubble';
+import ChartChoroplethMap from '@splunk/react-icons/ChartChoroplethMap';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartGantt from '@splunk/react-icons/ChartGantt';
+import ChartGaugeRadial from '@splunk/react-icons/ChartGauge';
+import ChartGaugeFiller from '@splunk/react-icons/ChartGaugeFiller';
+import ChartGaugeMarker from '@splunk/react-icons/ChartGaugeMarker';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import ChartPie from '@splunk/react-icons/ChartPie';
+import ChartSankey from '@splunk/react-icons/ChartSankey';
+import ChartScatter from '@splunk/react-icons/ChartScatter';
+import ChartSingleValue from '@splunk/react-icons/ChartSingleValue';
+import ChevronLeft from '@splunk/react-icons/ChevronLeft';
+import Menu from '@splunk/react-ui/Menu';
+import SlidingPanels from '@splunk/react-ui/SlidingPanels';
+
+
+function Complex() {
+    const [transition, setTransition] = React.useState<'forward' | 'backward' | undefined>(
+        'forward'
+    );
+    const [activePanelId, setActivePanelId] = React.useState('one');
+
+    const goBackward = () => {
+        setActivePanelId(activePanelId === 'one' ? 'two' : 'one');
+        setTransition('backward');
+    };
+
+    const goForward = () => {
+        setActivePanelId(activePanelId === 'one' ? 'two' : 'one');
+        setTransition('forward');
+    };
+
+    return (
+        <SlidingPanels activePanelId={activePanelId} transition={transition} style={{ width: 300 }}>
+            <SlidingPanels.Panel key="one" panelId="one">
+                <Menu>
+                    <Menu.Item selectable description="Recommended" descriptionPosition="right">
+                        Chart Types
+                    </Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item startAdornment={<ChartLine />} selectable>
+                        Line Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartArea />} selectable>
+                        Area Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartColumn />} selectable>
+                        Column Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartBar />} selectable>
+                        Bar Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartPie />} selectable>
+                        Pie Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartScatter />} selectable>
+                        Scatter Chart
+                    </Menu.Item>
+                    <Menu.Item startAdornment={<ChartBubble />} selectable>
+                        Bubble Chart
+                    </Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item hasSubmenu onClick={goForward}>
+                        More
+                    </Menu.Item>
+                </Menu>
+            </SlidingPanels.Panel>
+            <SlidingPanels.Panel key="two" panelId="two">
+                <Menu>
+                    <Menu.Item startAdornment={<ChevronLeft />} onClick={goBackward}>
+                        Back
+                    </Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item startAdornment={<ChartGantt />}>Gantt Chart</Menu.Item>
+                    <Menu.Item startAdornment={<ChartSankey />}>Sankey Chart</Menu.Item>
+                    <Menu.Item startAdornment={<ChartChoroplethMap />}>Choropleth Map</Menu.Item>
+                    <Menu.Item startAdornment={<ChartGaugeRadial />}>Radial Gauge</Menu.Item>
+                    <Menu.Item startAdornment={<ChartGaugeFiller />}>Filler Gauge</Menu.Item>
+                    <Menu.Item startAdornment={<ChartGaugeMarker />}>Marker Gauge</Menu.Item>
+                    <Menu.Item startAdornment={<ChartSingleValue />}>Single Value</Menu.Item>
+                </Menu>
+            </SlidingPanels.Panel>
+        </SlidingPanels>
+    );
+}
+
+export default Complex;
+```
+
+
+
+### Match Ranges
+
+Menu.Item can highlight portions of the label as matching a filter or search.
+
+```typescript
+import React from 'react';
+
+import Menu from '@splunk/react-ui/Menu';
+
+
+function MatchRanges() {
+    return (
+        <Menu style={{ width: 300 }}>
+            <Menu.Item matchRanges={[{ start: 5, end: 10 }]}>Line Chart</Menu.Item>
+            <Menu.Item matchRanges={[{ start: 5, end: 10 }]}>Area Chart</Menu.Item>
+            <Menu.Item
+                matchRanges={[
+                    { start: 2, end: 5 },
+                    { start: 7, end: 12 },
+                ]}
+            >
+                Column Chart
+            </Menu.Item>
+            <Menu.Item matchRanges={[{ start: 4, end: 9 }]}>Bar Chart</Menu.Item>
+            <Menu.Item matchRanges={[{ start: 4, end: 9 }]}>Pie Chart</Menu.Item>
+            <Menu.Item matchRanges={[{ start: 8, end: 13 }]}>Scatter Chart</Menu.Item>
+            <Menu.Item matchRanges={[{ start: 7, end: 12 }]}>Bubble Chart</Menu.Item>
+        </Menu>
+    );
+}
+
+export default MatchRanges;
+```
+
+
+
+
+## API
+
+
+### Menu API
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| children | React.ReactNode | no |  | Must be `Menu.Item`, `Menu.Heading`, or `Menu.Divider`. Interactive elements are not supported as children. |
+| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
+| focusMode | 'never' \| 'normal' \| 'roving' | no | 'roving' | Specifies whether the menu accept/retain focus and how the focus behaves.  - `never`: `Menu` will never take focus, and the Menu.Item will not have a focus-like appearance. - `normal`: `Menu` and its children follow the normal focus order of DOM without any interference. - `roving`: Single tab stop. Use up/down arrow keys to navigate and loop through Menu.Items. |
+| stopScrollPropagation | boolean | no |  | Prevents scrolling from propagating to the parent containers when the top or bottom of the `Menu` is reached. |
+
+
+
+### Menu.Item API
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| active | boolean | no |  | Active shows a temporarily selected state, similar to that of focus. This is used when filtering the `Menu` items in Multiselect, Select, and ComboBox and when navigating with arrows. |
+| children | React.ReactNode | no |  | Becomes the label. Must be a string if using `matchRanges`. |
+| description | string | no |  | Additional information to explain the option. |
+| descriptionPosition | 'right' \| 'bottom' | no | 'bottom' | The description text might appear to the right of the label or under the label. |
+| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user interaction and adds disabled styling. If set to `dimmed`, the component is able to be focused, and is more easily located. If set to `disabled`, the disabled attribute is set which makes the component unable to be focused and more difficult to locate. The default behavior when `disabled={true}` is `dimmed`. |
+| elementRef | React.Ref<HTMLAnchorElement \| HTMLButtonElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
+| endAdornment | React.ReactNode | no |  | Adornment after the label. |
+| hasSubmenu | boolean | no |  | Adds an icon to the right to show that there is a submenu. To implement submenus, use the `SlidingPanels` component. |
+| matchRanges | { start: number; end: number }[] | no |  | Sections of the label string to highlight as a match. |
+| onClick | React.MouseEventHandler<HTMLAnchorElement \| HTMLButtonElement> | no |  | Callback for click events. |
+| openInNewContext | boolean \| string | no |  | Open the "to" link in a new context, which is usually a new tab or window based on browser settings.  An icon and a screen reader message is added to indicate this behavior to users. The default message is "(Opens new window)"; this can be customized by passing a string instead of boolean to `openInNewContext`. |
+| role | 'menuitem' \| 'menuitemradio' \| 'menuitemcheckbox' \| 'listboxitem' \| 'link' \| 'option' | no |  | The default role is inferred from the other props. `selectable` with a `selectableAppearance` of 'checkmark' defaults to `menuitemradio`. `selectable` with a `selectableAppearance` of 'checkbox' defaults to `menuitemcheckbox`. Otherwise, the role defaults to `menuitem`. |
+| selectable | boolean | no |  | Enables selection for this item and reserves space for the control. Required when using `selected` or `selectableAppearance`. |
+| selectableAppearance | 'checkmark' \| 'checkbox' | no | 'checkmark' | Specifies the type of selection control to display when `selectable` is enabled. Use `'checkmark'` for single-select menus and `'checkbox'` for multi-select menus. |
+| selected | boolean \| 'some' | no |  | Controls the selection state of the item. The selection control (checkmark or checkbox) is only rendered when `selectable` is enabled.  When `selectableAppearance = 'checkmark'`: - `true` shows a checkmark.  When `selectableAppearance = 'checkbox'`: - `true` renders a checked box. - `'some'` renders an indeterminate box (`aria-checked="mixed"`). - `false` renders an unchecked box. |
+| startAdornment | React.ReactNode | no |  | Adornment in front of the label. |
+| to | string | no |  | The URL or path to link to. |
+| truncate | boolean | no |  | When `true`, wrapping is disabled and any additional text is truncated using an ellipsis. A `Tooltip` will render so users can see the full text on hover. |
+
+
+
+### Menu.Heading API
+
+A non-interactive `Menu` item used to separate and label groups of `Menu` items.
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| children | React.ReactNode | no |  |  |
+| outerStyle | React.CSSProperties | no |  |  |
+| title | boolean | no |  | Renders this heading as a title to describe the whole `Menu`, which should only be enabled for the first heading in a `Menu`. |
+
+
+
+### Menu.Divider API
+
+A non-interactive menu item used to visually separate groups of items in the menu.
+
+
+
+## Accessibility
+
+> Flyouts and multi-stage menus are NOT supported by the design system.
+
+## Menu
+### Visual Design
+- Color contrast ratio **MUST** be:
+    - &gt= 4.5:1 for text to background-color [SC 1.4.3][1]
+    - &gt= 3:1 checkmark in selected [SC 1.4.11][2]
+- Empty `alt-text("")` **MUST** be present for adornments and avatars in a menu, as these are decorative [SC 1.1.1][3]
+
+### Content
+- Content **MAY** be ~60-85 characters per line for alphabetic scripts
+
+### States
+- Color contrast guidelines do NOT apply to disabled list items
+
+### Interaction Design
+- **MUST** have a visible focus border [SC 2.4.7][4]
+- **MUST** have keyboard navigation based on what's in menu [SC 2.1][5]
+    - Links (navigation):
+        - <kbd>Enter</kbd> **and** <kbd>Space</kbd>: direct user to new page
+        - <kbd>Up</kbd>/<kbd>Down</kbd>: cycle through menu items
+    - Selection:
+        - <kbd>Enter</kbd> **and** <kbd>Space</kbd>: select menu items
+        - <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>: cycle through menu items
+        - <kbd>Esc</kbd>: close menu and return to parent element 
+
+### Implementation
+- If menu uses separators and/or headings, developer **MUST** build a common component that flexes between separator and heading 
+    - No headings allow separator to act on its own
+    - Headings allow screen reader to skip separator and announce heading 
+- Screen Reader **SHOULD** announce:
+    - Upon entering menu how many items are in the menu(1 of n)
+    - When menu is loading 
+- Screen Reader **SHOULD NOT** register these elements in list item count:
+    - Dividers
+    - Headers 
+    - Any non-interactive element 
+- To prevent confustion between ellipses and "more" button, menu component **SHOULD** use wrap instead of truncating text 
+- If a menu is part of a dialog or pop-up, trapping and inerting behavior **MUST** be observed to prevent keyboard traps [SC 2.1.2][6]
+
+[1]: https://www.w3.org/TR/WCAG21/#contrast-minimum
+[2]: https://www.w3.org/TR/WCAG21/#non-text-contrast
+[3]: https://www.w3.org/TR/WCAG21/#non-text-content
+[4]: https://www.w3.org/TR/WCAG21/#focus-visible
+[5]: https://www.w3.org/TR/WCAG21/#keyboard-accessible
+[6]: https://www.w3.org/TR/WCAG21/#no-keyboard-trap
+
+
+## Menu Divider
+
+### Visual Design
+
+- Dividers do not need to follow any color contrast guidelines
+
+### Interaction Model
+
+- **Designers should determine functionality for engineering to implement.**
+    - Horizontal Rule: An HTML semantic `<hr>` used for long prose or documentation.
+    - Visual Separator: use `aria-hidden`
+    - Functional Separator: should be in the a11y tree and skipped when keyboard-only
+
+### Implementation
+
+- All dividers **SHOULD NOT** be counted towards the number of items in lists or menus and should not be announced by screen readers. 
+This is to prevent misinformation for screen reader users of what is interactive and what isn't.
+- Must have `role="separator"`
+
+