@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

package/generated/docs/components-menu-docs.md

@@ -1,704 +0,0 @@
-[](#menu)Menu
-=============
-
-Overview
---------
-
-A menu can display grouped action buttons, navigation items or headings.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#basic)Basic
-
-`IressMenuHeading`, `IressMenuDivider` and `IressMenuItem` should be supplied as `children` of the menu.
-
-*   `IressMenuHeading` can be used to display a heading, it supports all of the props of `h*`. You can change the heading level with the `level` prop.
-*   `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.
-*   `IressMenuItem` is a wrapper around `IressButton` and supports all of its props.
-
-**Note:** The `mapMenuItems` helper function, originally used to map options to MenuItem components, is now deprecated. Instead, you can use `array.map` to map the options to menu sub-components.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-### [](#complex)Complex
-
-`IressMenuHeading` and `IressMenuItem` support `prepend`, `divider` and `append` slots, to allow you to create complex menu items.
-
-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)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressMenu\>
-  <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"/>}
-    level\="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\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#secondary-navigation)Secondary navigation
-
-When the `href` prop is set on `MenuLink`, 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.
-
-[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/)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-### [](#headings)Headings
-
-Using the `IressMenuHeading` component, you can create headings within the menu. You can also change the heading level with the `level` prop.
-
-#### Menu heading (h4)
-
-Menu item 1
-
-##### Menu heading (h5)
-
-Menu item 2
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressMenu\>
-  <IressMenuHeading level\="h4"\>
-    Menu heading (h4)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 1  </IressMenuItem\>
-  <IressMenuHeading level\="h5"\>
-    Menu heading (h5)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 2  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#dividers)Dividers
-
-When the `divider` prop is set, the `IressMenuHeading`, `IressMenuButton` and `IressMenuLink` 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.
-
-#### Menu heading (h4)
-
-Menu item 1Menu item 2
-
-##### Menu heading (h5)
-
-Menu item 3Menu item 4
-
-* * *
-
-Menu item 5
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressMenu\>
-  <IressMenuHeading
-    divider
-    level\="h4"
-  \>
-    Menu heading (h4)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 1  </IressMenuItem\>
-  <IressMenuItem divider\>
-    Menu item 2  </IressMenuItem\>
-  <IressMenuHeading level\="h5"\>
-    Menu heading (h5)  </IressMenuHeading\>
-  <IressMenuItem selected\>
-    Menu item 3  </IressMenuItem\>
-  <IressMenuItem\>
-    Menu item 4  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem\>
-    Menu item 5  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#fluid-menus)Fluid menus
-
-By setting the `fluid` prop on the menu component, the menu will stretch to the width of its containing element.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-### [](#layout)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
-
-### stack
-
-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)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="lg"\>
-  <IressText\>
-    <h3\>
-      stack    </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\>
-
-Copy
-
-### [](#text-wrapping)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.
-
-Menu item with some text that wraps
-
-Non wrapping menu item with some text
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<div
-  style\={{
-    display: 'flex',
-    maxWidth: '300px'
-  }}
-\>
-  <IressMenu defaultSelected\="5"\>
-    <IressMenuItem\>
-      Menu item with some text that wraps    </IressMenuItem\>
-  </IressMenu\>
-  <IressMenu
-    defaultSelected\="5"
-    noWrap
-  \>
-    <IressMenuItem\>
-      Non wrapping menu item with some text    </IressMenuItem\>
-  </IressMenu\>
-</div\>
-
-Copy
-
-### [](#slot-props)Slot props
-
-`IressMenuHeading`, `IressMenuButton` and `IressMenuLink` provide `prepend` and `append` props to position content either before or after its content.
-
-Prepend slot
-------------
-
-New fileSave file as
-
-### Append slot
-
-[Visit the Iress website](https://www.iress.com)[Visit Google8+](https://google.com)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressMenu role\="menu"\>
-  <IressMenuHeading 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" />}
-    level\="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\>
-
-Copy
-
-### [](#roles)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.
-*   `nav`: The menu is treated the same as the `list` role, except the menu is styled differently.
-
-**Note:** When menu is used as a child of popover, the `role` that is set on popover will be applied to menu (so you don't need to set it twice).
-
-#### [](#list)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.
-
-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
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-#### [](#menu-1)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.
-
-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
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-#### [](#listbox)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.
-
-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 and Combobox 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
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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\>
-
-Copy
-
-#### [](#nav)Nav
-
-The `nav` role acts as a styling hook to be able to style the selected menu item differently to default menus. This will be most often used as a child of the `IressNavbar` component.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-The `nav` type acts as a styling hook to be able to style the selected menu item differently to default menus. This will be most often used as a child of the `Navbar` component.
-
-The nav menu exposes the following theme tokens in order to customise the styling:
-
-*   `--iress-menu-item-nav-selected-background-color`
-*   `--iress-menu-item-nav-selected-text-color`
-*   `--iress-menu-item-nav-text-align`
-*   `--iress-menu-item-nav-border-radius`
-
-Keyboard interaction
-
-*   Menu items cannot be navigated using the arrow keys
-*   Menu items are navigated using the `tab` key
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressMenu
-  defaultSelected\={5}
-  role\="nav"
-\>
-  <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\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Basic](#basic)
-    *   [Complex](#complex)
-*   [Examples](#examples)
-    *   [Secondary navigation](#secondary-navigation)
-    *   [Headings](#headings)
-    *   [Dividers](#dividers)
-    *   [Fluid menus](#fluid-menus)
-    *   [Layout](#layout)
-    *   [Text wrapping](#text-wrapping)
-    *   [Slot props](#slot-props)
-    *   [Roles](#roles)