@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-menu-menuitem-docs.md

@@ -0,0 +1,1455 @@
+Menu Item
+=========
+
+Overview
+--------
+
+Menu items are headings, buttons and dividers used inside an \`IressMenu\`
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-menu-menuitem--unselected)
+
+Menu item
+
+```
+
+<IressMenuItem\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Selected
+
+The `IressMenuItem` can be set to selected using the `selected` prop.
+
+**Note:** If you are using `IressMenu` with a `role` of `listbox`, you should use the `defaultSelected` or `selected` prop on the `IressMenu` to set the selected state of its `<IressMenuItem />` children, as the `selected` prop will be ignored.
+
+[](./iframe.html?id=components-menu-menuitem--selected)
+
+Menu item
+
+```
+
+<IressMenuItem selected\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Value
+
+A menu item can have a unique value set to it, used to determine its selected state in a `IressMenu` component with a `role` of `listbox`. The value is not visible to end users.
+
+[](./iframe.html?id=components-menu-menuitem--value)
+
+Menu item with value
+
+```
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item with value"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | 
+
+9
+
+ |
+
+### `canToggle`
+
+When `canToggle` is set to true, the menu item can be toggled between selected and unselected states. This only works in a `IressMenu` component with a `role` of `listbox`.
+
+[](./iframe.html?id=components-menu-menuitem--can-toggle)
+
+Menu item with value
+
+```
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem
+    canToggle
+    value\={9}
+  \>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item with value"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | 
+
+9
+
+ |
+
+### Prepend and append
+
+You can prepend and append content to a menu item using the `prepend` and `append` props.
+
+[](./iframe.html?id=components-menu-menuitem--prepend-and-append)
+
+Menu itemNew
+
+```
+
+<IressMenuItem
+  append\={<IressBadge mode\="success"\>New</IressBadge\>}
+  prepend\={<IressIcon name\="home" />}
+\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+append :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ children, mode = "neutral", pill, className, host, ...restProps }) => { const classes = badgeStyles.raw({ mode, pill, host: !!host }); const \[styleProps, nonStyleProps\] = splitCssProps(restProps); const badge = /\* @\_\_PURE\_\_ \*/ jsxDEV( styled.span, { ...nonStyleProps, className: cx( css(classes.root, classes.badge, styleProps), className, GlobalCSSClass.Badge ), children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Badge/Badge.tsx", lineNumber: 43, columnNumber: 3 }, this ); return host ? /\* @\_\_PURE\_\_ \*/ jsxDEV( "div", { className: css(classes.host), "data-testid": propagateTestid(restProps\["data-testid"\], "host"), children: \[ host, badge \] }, void 0, true, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Badge/Badge.tsx", lineNumber: 56, columnNumber: 3 }, this ) : badge; }
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+prepend :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, fixedWidth, flip, name, rotate, screenreaderText, set = "fal", spin, ...restProps }) => { const prefix = "fa-"; const classes = icon({ flip, rotate, spin }); return /\* @\_\_PURE\_\_ \*/ jsxDEV( styled.span, { role: "img", className: cx( classes, GlobalCSSClass.Icon, set, \`${prefix}${name}\`, fixedWidth && "fa-fw", className ), "aria-hidden": !screenreaderText && "true", "aria-label": screenreaderText, ...restProps }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Icon/Icon.tsx", lineNumber: 67, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Multi-select menus
+
+Inside a `IressMenu` with a `role` of `listbox` and the `multiSelect` prop set to true, the menu item will display with a checkbox.
+
+[](./iframe.html?id=components-menu-menuitem--multi-select)
+
+Menu item with valueMenu item with value
+
+```
+
+<IressMenu
+  multiSelect
+  role\="listbox"
+\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item with value"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | 
+
+9
+
+ |
+
+### Element
+
+You can use the `element` prop to render a custom component inside the menu item. This is useful for rendering a component from a third-party library, such as `react-router-dom`.
+
+[](./iframe.html?id=components-menu-menuitem--element)
+
+[Iress](https://iress.com)[Google](https://google.com)
+
+```
+
+import { IressMenu, IressMenuItem } from '@iress-oss/ids-components';
+import { type HTMLAttributes } from 'react';
+/\*\*
+ \* This could be the \`Link\` component from \`react-router-dom\` or any other routing library. \*/
+const Link \= ({
+  to,
+  ...restProps
+}: Omit<HTMLAttributes<HTMLAnchorElement\>, 'href'\> & { to: string }) \=> (
+  <a {...restProps} href\={to} />
+);
+export const RoutingLinkMenu \= () \=> {
+  return (
+    <IressMenu role\="menu" fluid\>
+      <IressMenuItem element\={Link} to\="https://iress.com" selected\>
+        Iress      </IressMenuItem\>
+      <IressMenuItem element\={Link} to\="https://google.com"\>
+        Google      </IressMenuItem\>
+    </IressMenu\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Divider
+
+When `divider` is set to true, the menu item will render with a bottom border.
+
+[](./iframe.html?id=components-menu-menuitem--divider)
+
+Menu item with divider
+
+* * *
+
+```
+
+<IressMenuItem divider\>
+  Menu item with divider
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+When true, the item can be toggled even in single-select mode.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+The children to be rendered inside the menu item, describing the action.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Menu item with divider"
+
+ |
+| className | 
+
+The class name to be applied to the menu item.
+
+string
+
+
+
+ | \- | Set string |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| element | 
+
+Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
+
+C
+
+
+
+ | \- | Set object |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | \- | Set object |
+| onBlur | 
+
+Emitted when the menu item is blurred.
+
+FocusEventHandler
+
+
+
+ | \- | Set object |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| onKeyDown | 
+
+Emitted when a key is pressed while focused on the menu item.
+
+KeyboardEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When true, shows the item in selected state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+To be used when menu type is listbox.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+However, it is recommended to use the `IressMenuDivider` component instead.
+
+[](./iframe.html?id=components-menu-menuitem-divider--divider)
+
+* * *
+
+```
+
+<IressMenuDivider />
+
+```
+
+#### Props
+
+### Heading
+
+You can use the `IressMenuHeading` to render headings within a menu. This adds styling so the appropriate padding is applied.
+
+[](./iframe.html?id=components-menu-menuitem-heading--heading)
+
+Menu text
+---------
+
+```
+
+<IressMenu\>
+  <IressMenuHeading\>
+    Menu text  </IressMenuHeading\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu text |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| element | 
+
+ | 
+
+'h2'
+
+ | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| textStyle | 
+
+ | 
+
+'typography.heading.4'
+
+ | Set object |
+
+### Text
+
+You can use the `IressMenuText` to render other text within a menu. This adds styling so the appropriate padding is applied.
+
+[](./iframe.html?id=components-menu-menuitem-text--text)
+
+Menu text
+
+```
+
+<IressMenu\>
+  <IressMenuText\>
+    Menu text  </IressMenuText\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu text |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactNode
+
+
+
+ | \- | Set object |