@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-docs.md

@@ -0,0 +1,2219 @@
+Menu
+====
+
+Overview
+--------
+
+A menu can display grouped action buttons, navigation items or headings.
+
+* * *
+
+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--basic)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+```
+
+<IressMenu defaultSelected\="5"\>
+  <IressMenuHeading\>
+    Menu heading  </IressMenuHeading\>
+  <IressMenuItem value\="2"\>
+    Menu item (button)  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem href\="https://iress.com"\>
+    Menu item (link)  </IressMenuItem\>
+  <IressMenuItem
+    selected
+    value\={5}
+  \>
+    Menu item (selected)  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+Props
+-----
+
+Below are the custom props you can access when using `IressMenu`. In addition to these, you have access to the original props of the underlying [`div` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div).
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+"5"
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+Usage
+-----
+
+### Basic
+
+`IressMenuDivider`, `IressMenuHeading`, `IressMenuItem` and `IressMenuText` should be supplied as `children` of the menu.
+
+*   `IressMenuDivider` can be used to display a divider, it supports all of the props of `hr`. It will adjust according to the menu's role and layout.
+*   `IressMenuHeading` is used to display headings. It supports all of the props of `IressText` and will adjust according to the menu's role and layout.
+*   `IressMenuItem` is used to display an interactive item. If provided a `href` prop will render the item as a link, otherwise it will render as a button.
+*   `IressMenuText` can be used to display other non-interactive text. It supports all of the props of `IressText`.
+
+[](./iframe.html?id=components-menu--basic)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+```
+
+<IressMenu defaultSelected\="5"\>
+  <IressMenuHeading\>
+    Menu heading  </IressMenuHeading\>
+  <IressMenuItem value\="2"\>
+    Menu item (button)  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem href\="https://iress.com"\>
+    Menu item (link)  </IressMenuItem\>
+  <IressMenuItem
+    selected
+    value\={5}
+  \>
+    Menu item (selected)  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+"5"
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Complex
+
+`IressMenuItem`, `IressMenuHeading` and `IressMenuText` support `prepend`, `divider` and `append` slots, to allow you to create complex menu items.
+
+Note: Instead of using the `divider` prop on `IressMenuItem`, you can use `IressMenuDivider` to separate items. This gives you more control over where the divider sits.
+
+[](./iframe.html?id=components-menu--complex)
+
+Heading with prepend
+--------------------
+
+Button with append and prepend
+
+* * *
+
+### Heading with append and prepend
+
+[Link with append](https://iress.com)
+
+* * *
+
+Button with append[A link with a very long name that wraps based on the menu's `noWrap` prop](https://iress.com)
+
+```
+
+<IressMenu maxWidth\="input.25perc"\>
+  <IressMenuHeading prepend\={<IressIcon fixedWidth name\="smile"/>}\>
+    Heading with prepend  </IressMenuHeading\>
+  <IressMenuItem
+    append\={<IressIcon name\="chevron-right" />}
+    divider
+    prepend\={<IressIcon fixedWidth name\="flag"/>}
+    selected
+    value\="3"
+  \>
+    Button with append and prepend  </IressMenuItem\>
+  <IressMenuHeading
+    append\={<IressIcon fixedWidth name\="smile"/>}
+    element\="h3"
+    prepend\={<IressIcon fixedWidth name\="smile"/>}
+  \>
+    Heading with append and prepend  </IressMenuHeading\>
+  <IressMenuItem
+    append\={<IressIcon name\="chevron-right" />}
+    href\="https://iress.com"
+    value\="4"
+  \>
+    Link with append  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem
+    append\={<IressIcon name\="chevron-right" />}
+    value\="6"
+  \>
+    Button with append  </IressMenuItem\>
+  <IressMenuItem
+    append\={<IressIcon name\="chevron-right" />}
+    href\="https://iress.com"
+    value\="7"
+  \>
+    A link with a very long name that wraps based on the menu's{' '}    <code\>
+      noWrap    </code\>
+    {' '}prop
+  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| maxWidth | 
+
+string
+
+
+
+ | \- | input.25perc |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Secondary navigation
+
+When the `href` prop is set on `IressMenuItem`, it will render as a link.
+
+When rendering a set of links for navigation purposes (as a secondary nav in this example) make sure you wrap the `IressMenu` in a nav element and set the menu's `role` prop to list.
+
+[](./iframe.html?id=components-menu--secondary-navigation)
+
+[Financial advice](https://www.iress.com/software/financial-advice/)[Trading and market data](https://www.iress.com/software/trading-and-market-data/)[Investment management](https://www.iress.com/software/investment-management/)[Mortgages](https://www.iress.com/software/mortgages/)[Life and pensions](https://www.iress.com/software/life-and-pensions/)
+
+```
+
+<nav aria-label\="Secondary"\>
+  <IressMenu\>
+    <IressMenuItem href\="https://www.iress.com/software/financial-advice/"\>
+      Financial advice    </IressMenuItem\>
+    <IressMenuItem
+      href\="https://www.iress.com/software/trading-and-market-data/"
+      selected
+    \>
+      Trading and market data    </IressMenuItem\>
+    <IressMenuItem href\="https://www.iress.com/software/investment-management/"\>
+      Investment management    </IressMenuItem\>
+    <IressMenuItem href\="https://www.iress.com/software/mortgages/"\>
+      Mortgages    </IressMenuItem\>
+    <IressMenuItem href\="https://www.iress.com/software/life-and-pensions/"\>
+      Life and pensions    </IressMenuItem\>
+  </IressMenu\>
+</nav\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Headings
+
+Using the `IressMenuHeading` component, you can create headings within the menu. Simply set the `element` or `textStyle` prop to your desired heading level.
+
+[](./iframe.html?id=components-menu--headings)
+
+#### Menu heading (h4)
+
+Menu item 1
+
+##### Menu heading (h5)
+
+Menu item 2
+
+```
+
+<IressMenu\>
+  <IressMenuHeading element\="h4"\>
+    Menu heading (h4)  </IressMenuHeading\>
+  <IressMenuItem\>
+    Menu item 1  </IressMenuItem\>
+  <IressMenuHeading element\="h5"\>
+    Menu heading (h5)  </IressMenuHeading\>
+  <IressMenuItem\>
+    Menu item 2  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Dividers
+
+When the `divider` prop is set, the `IressMenuItem`, `IressMenuHeading` and `IressMenuText` will render a bottom border.
+
+In situations where a bottom border will not work, you can also use `IressMenuDivider` inside the menu to separate items.
+
+[](./iframe.html?id=components-menu--dividers)
+
+#### Menu heading (h4)
+
+* * *
+
+Menu item 1Menu item 2
+
+* * *
+
+##### Menu heading (h5)
+
+Menu item 3Menu item 4
+
+* * *
+
+Menu item 5
+
+```
+
+<IressMenu\>
+  <IressMenuHeading
+    divider
+    element\="h4"
+  \>
+    Menu heading (h4)  </IressMenuHeading\>
+  <IressMenuItem\>
+    Menu item 1  </IressMenuItem\>
+  <IressMenuItem divider\>
+    Menu item 2  </IressMenuItem\>
+  <IressMenuHeading element\="h5"\>
+    Menu heading (h5)  </IressMenuHeading\>
+  <IressMenuItem selected\>
+    Menu item 3  </IressMenuItem\>
+  <IressMenuItem\>
+    Menu item 4  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem\>
+    Menu item 5  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Fluid menus
+
+By setting the `fluid` prop on the menu component, the menu will stretch to the width of its containing element.
+
+[](./iframe.html?id=components-menu--fluid)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+```
+
+<IressMenu
+  defaultSelected\="5"
+  fluid
+\>
+  <IressMenuHeading\>
+    Menu heading  </IressMenuHeading\>
+  <IressMenuItem value\="2"\>
+    Menu item (button)  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem href\="https://iress.com"\>
+    Menu item (link)  </IressMenuItem\>
+  <IressMenuItem
+    selected
+    value\={5}
+  \>
+    Menu item (selected)  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+"5"
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Layout
+
+The `layout` prop comes with three options:
+
+*   `stack` (default) - menu items will stack on top of each other
+*   `inline` - menu items will be inline
+*   `inline-equal-width` - menu items will be inline and have equal width
+
+[](./iframe.html?id=components-menu--layout)
+
+### Stack (default)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+### Inline
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+### Inline Equal Width
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+```
+
+<IressStack gap\="lg"\>
+  <IressText\>
+    <h3\>
+      Stack (default)    </h3\>
+    <IressMenu
+      defaultSelected\="5"
+      layout\="stack"
+    \>
+      <IressMenuHeading\>
+        Menu heading      </IressMenuHeading\>
+      <IressMenuItem value\="2"\>
+        Menu item (button)      </IressMenuItem\>
+      <IressMenuDivider />
+      <IressMenuItem href\="https://iress.com"\>
+        Menu item (link)      </IressMenuItem\>
+      <IressMenuItem
+        selected
+        value\={5}
+      \>
+        Menu item (selected)      </IressMenuItem\>
+    </IressMenu\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      Inline    </h3\>
+    <IressMenu
+      defaultSelected\="5"
+      layout\="inline"
+    \>
+      <IressMenuHeading\>
+        Menu heading      </IressMenuHeading\>
+      <IressMenuItem value\="2"\>
+        Menu item (button)      </IressMenuItem\>
+      <IressMenuDivider />
+      <IressMenuItem href\="https://iress.com"\>
+        Menu item (link)      </IressMenuItem\>
+      <IressMenuItem
+        selected
+        value\={5}
+      \>
+        Menu item (selected)      </IressMenuItem\>
+    </IressMenu\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      Inline Equal Width    </h3\>
+    <IressMenu
+      defaultSelected\="5"
+      layout\="inline-equal-width"
+    \>
+      <IressMenuHeading\>
+        Menu heading      </IressMenuHeading\>
+      <IressMenuItem value\="2"\>
+        Menu item (button)      </IressMenuItem\>
+      <IressMenuDivider />
+      <IressMenuItem href\="https://iress.com"\>
+        Menu item (link)      </IressMenuItem\>
+      <IressMenuItem
+        selected
+        value\={5}
+      \>
+        Menu item (selected)      </IressMenuItem\>
+    </IressMenu\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+"5"
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | \- |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Text wrapping
+
+By default, menu item text will wrap on to the next line when it exceeds the menu width. Using the `noWrap` prop, you set the menu item text to not wrap.
+
+[](./iframe.html?id=components-menu--no-wrap)
+
+Menu item with some text that wraps
+
+Non wrapping menu item with some text
+
+```
+
+<IressInline\>
+  <IressMenu
+    defaultSelected\="5"
+    maxWidth\="input.12"
+  \>
+    <IressMenuItem\>
+      Menu item with some text that wraps    </IressMenuItem\>
+  </IressMenu\>
+  <IressMenu
+    defaultSelected\="5"
+    maxWidth\="input.12"
+    noWrap
+  \>
+    <IressMenuItem\>
+      Non wrapping menu item with some text    </IressMenuItem\>
+  </IressMenu\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+"5"
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | \- |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Slot props
+
+`IressMenuItem`, `IressMenuHeading` and `IressMenuText` provide `prepend` and `append` props to position content either before or after its content.
+
+[](./iframe.html?id=components-menu--slot-props)
+
+#### Prepend slot
+
+New fileSave file as
+
+* * *
+
+### Append slot
+
+[Visit the Iress website](https://www.iress.com)[Visit Google8+](https://google.com)
+
+```
+
+<IressMenu role\="menu"\>
+  <IressMenuHeading
+    element\="h4"
+    prepend\={<IressIcon name\="cog" />}
+  \>
+    Prepend slot  </IressMenuHeading\>
+  <IressMenuItem
+    onClick\={() \=> {}}
+    prepend\={<IressIcon name\="file-alt" />}
+  \>
+    New file  </IressMenuItem\>
+  <IressMenuItem
+    divider
+    onClick\={() \=> {}}
+    prepend\={<IressIcon name\="save" />}
+  \>
+    Save file as  </IressMenuItem\>
+  <IressMenuHeading
+    append\={<IressIcon name\="link" />}
+    element\="h3"
+  \>
+    Append slot  </IressMenuHeading\>
+  <IressMenuItem
+    append\={<IressIcon name\="chevron-right" />}
+    href\="https://www.iress.com"
+  \>
+    Visit the Iress website  </IressMenuItem\>
+  <IressMenuItem
+    append\={<IressBadge mode\="warning"\>8+</IressBadge\>}
+    href\="https://google.com"
+  \>
+    Visit Google  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+### Roles
+
+The `role` prop that comes with the menu component not only changes the aria-role of the menu to allow it to be easily recognised in screen readers, but also changes how the menu is interacted with.
+
+There are four roles supported:
+
+*   `list` (default): The menu is treated as a list of items. Child menu subcomponents render with the `listitem` role where appropriate. The user navigates using the `tab` key.
+*   `menu`: The menu is treated as a menu of items. Child menu subcomponents render with the `menuitem` role where appropriate. The user navigates using `arrow` keys.
+*   `listbox`: The menu is treated as a list of selectable items, similar to a `<select />`. Child menu subcomponents render with the `option` role where appropriate. The user navigates using `arrow` keys.
+
+**Note:** When menu is used as a child of popover, the `type` that is set on popover will be applied to menu (so you don't need to set it twice).
+
+#### List
+
+The default role for the menu component is `list`. It is most often used for navigation and its items can be navigated (using the keyboard) with the `tab` key.
+
+[](./iframe.html?id=components-menu--list-role)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+The list menu is used to describe that the items are related to the same context, similar to using `ul` or `ol` lists. It is activated by setting the `role` prop to `list`.
+
+Keyboard interaction
+
+*   Menu items cannot be navigated using the arrow keys
+*   Menu items are navigated using the `tab` key
+
+```
+
+<IressMenu defaultSelected\={5}\>
+  <IressMenuHeading\>
+    Menu heading  </IressMenuHeading\>
+  <IressMenuItem value\="2"\>
+    Menu item (button)  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem href\="https://iress.com"\>
+    Menu item (link)  </IressMenuItem\>
+  <IressMenuItem
+    selected
+    value\={5}
+  \>
+    Menu item (selected)  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+5
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+#### Menu
+
+The `menu` role is used when the items in the menu has an action that performs a task in the application. The items can be navigated (using the keyboard) with the `arrow` keys, depending on the layout.
+
+[](./iframe.html?id=components-menu--menu-role)
+
+Menu heading
+------------
+
+Menu item (button)
+
+* * *
+
+[Menu item (link)](https://iress.com)Menu item (selected)
+
+The application menu is used when the items in the menu has an action that performs a task in the application. It is activated by setting the `role` prop to `menu`.
+
+Keyboard interaction
+
+*   In stack layout, pressing the `up` arrow key on the first item will focus the last item
+*   In stack layout, pressing the `down` arrow key on the last item will focus the first item
+*   In inline layouts, pressing the `left` arrow key on the first item will focus the last item
+*   In inline layouts, pressing the `right` arrow key on the last item will focus the first item
+*   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
+
+```
+
+<IressMenu
+  defaultSelected\={5}
+  role\="menu"
+\>
+  <IressMenuHeading\>
+    Menu heading  </IressMenuHeading\>
+  <IressMenuItem value\="2"\>
+    Menu item (button)  </IressMenuItem\>
+  <IressMenuDivider />
+  <IressMenuItem href\="https://iress.com"\>
+    Menu item (link)  </IressMenuItem\>
+  <IressMenuItem
+    selected
+    value\={5}
+  \>
+    Menu item (selected)  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| changeOnBlur | 
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+5
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |
+
+#### Listbox
+
+The `listbox` role is used for lists from which a user may select one or more items.
+
+A value is supplied to `IressMenuButton` (like you would with an option element inside a select) and a `onChange` event is emitted with the selected value(s) whenever the selection is changed by the user.
+
+Set the `multiSelect` prop to true for a multi-selectable listbox.
+
+[](./iframe.html?id=components-menu--listbox-role)
+
+New taskSend prospect welcome packBook in Discovery meetingProspect proceeding
+
+Multi-select
+
+The `listbox` menu is used for lists from which a user may select one or more items.
+
+A value is supplied to MenuItem (like you would with an `option` element inside a `select`) and a `onChange` event is emitted with the selected value(s) whenever the selection is changed by the user.
+
+If you need to set the selected state of an item programmatically, you can use the `selected` prop. This is set as string on Menu (or an array of strings for multi-selectable Menus), which then sets the selected state the child MenuItems. You can also set the `selected` prop on individual MenuItems, although we recommend that you use Menu's `selected` prop instead.
+
+**Note:** This is the menu type used to power Filter components.
+
+Keyboard interaction
+
+*   Menu items can be navigated using the arrow keys, depending on the orientation of the menu.
+*   In stack layouts, pressing the `up` arrow key on the first item will **not** focus the last item
+*   In stack layouts, pressing the `down` arrow key on the last item will **not** focus the first item
+*   In inline layouts, pressing the `right` arrow key on the last item will **not** focus the first item
+*   In inline layouts, pressing the `left` arrow key on the first item will **not** focus the last item
+*   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
+
+```
+
+<IressMenu
+  aria-label\="Selectable listbox"
+  defaultSelected\={5}
+  role\="listbox"
+\>
+  <IressMenuItem value\={0}\>
+    New task  </IressMenuItem\>
+  <IressMenuItem value\={1}\>
+    Send prospect welcome pack  </IressMenuItem\>
+  <IressMenuItem value\={2}\>
+    Book in Discovery meeting  </IressMenuItem\>
+  <IressMenuItem value\={3}\>
+    Prospect proceeding  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| aria-label | 
+string
+
+
+
+ | \- | Selectable listbox |
+| changeOnBlur | 
+
+If set to true, change event will be fired with the correctly selected value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+| defaultSelected | 
+
+Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
+
+unknown
+
+
+
+ | \- | 
+
+5
+
+ |
+| fluid | 
+
+If set to true, menu will fill the width of its container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| id | 
+
+Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
+
+string
+
+
+
+ | \- | Set string |
+| layout | 
+
+Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+stackinlineinline-equal-width
+
+ |
+| multiSelect | 
+
+If set to true, menu items will contain checkboxes.
+
+TMultiple
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+If set to true, menu items will not wrap onto a separate line when space is exceeded.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the menu value changes
+
+(value?: ControlledValue<T, TMultiple> | null) => void
+
+ | \- | \- |
+| role | 
+
+Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+
+union
+
+
+
+ | 
+
+'list'
+
+ | 
+
+menulistlistbox
+
+ |
+| selected | 
+
+Selected values of menu when `role` is listbox. Used for controlled menus.
+
+unknown
+
+
+
+ | \- | Set object |