# ListMenu

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/listMenu
*Captured:* 2026-04-27T14:58:22.286Z

A simple list menu that supports grouping and filter.

## ListMenu

### Example: Example 1

ListMenu (default)
Group
Lorem
Disabled Ipsum
Dolor
Sit amet
No Link Sample

ListMenu with optional name filter

Group 5 items
Lorem
Disabled Ipsum
Dolor
Sit amet
No Link Sample

#### React (tsx)

```tsx
import { useState, type MouseEvent, type MouseEventHandler } from 'react';

import ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';

const menuItems = (activeItem: string, setActiveItem: MouseEventHandler<HTMLSpanElement>): ListMenuItem[] => [
    {
        group: 'Group',
        navItems: [
            {
                key: 'Lorem',
                item: (
                    <span className={activeItem === '0' ? 'active' : ''} data-key='0' onClick={setActiveItem}>
                        Lorem
                    </span>
                ),
            },
            {
                key: 'Lipsum',
                disabled: true,
                item: (
                    <span className={activeItem === '1' ? 'active' : ''} data-key='1' onClick={setActiveItem}>
                        Disabled Ipsum
                    </span>
                ),
            },
            {
                key: 'Dolor',
                item: (
                    <span className={activeItem === '2' ? 'active' : ''} data-key='2' onClick={setActiveItem}>
                        Dolor
                    </span>
                ),
            },
            {
                key: 'Sit amet',
                item: (
                    <span className={activeItem === '3' ? 'active' : ''} data-key='3' onClick={setActiveItem}>
                        Sit amet
                    </span>
                ),
            },
            {
                key: 'No link',
                item: <span>No Link Sample</span>,
            },
        ],
    },
];

export default () => {
    const [activeItem, setActiveItem] = useState('0');

    const onItemClick = (event: MouseEvent) => {
        const key = (event.target as HTMLSpanElement).getAttribute('data-key') as string;
        setActiveItem(key);
    };

    return (
        <div>
            <div className='h5 margin-bottom-20'>ListMenu (default)</div>
            <ListMenu menuItems={menuItems(activeItem, onItemClick)} />
            <hr />
            <div className='h5 margin-bottom-20'>ListMenu with optional name filter</div>
            <ListMenu
                menuItems={menuItems(activeItem, onItemClick).map(item => ({
                    ...item,
                    badge: '5 items',
                    badgeType: 'muted',
                }))}
                enableFilter
                focusFilter
                filterPlaceholder='Filter by name'
                notFoundMessage='Nothing found'
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="h5 margin-bottom-20">ListMenu (default)</div>
    <div class="ListMenu  ">
        <ul class="ListMenuGroup ">
            <li class="ListMenuHeader">
                <span class="">Group</span>
            </li>
            <li class="">
                <span class="active" data-key="0">Lorem</span>
            </li>
            <li class="disabled">
                <span class="" data-key="1">Disabled Ipsum</span>
            </li>
            <li class="">
                <span class="" data-key="2">Dolor</span>
            </li>
            <li class="">
                <span class="" data-key="3">Sit amet</span>
            </li>
            <li class="">
                <span>No Link Sample</span>
            </li>
        </ul>
    </div>
    <hr>
    <div class="h5 margin-bottom-20">ListMenu with optional name filter</div>
    <div class="ListMenu  ">
        <div class="form-group margin-bottom-5 padding-left-15 padding-right-15 padding-bottom-15 position-sticky top-0 z-index-1">
            <div class="input-group width-100pct">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-search" aria-hidden="true">
                    </span>
                </span>
                <div class="ClearableInput input-group">
                    <input placeholder="Filter by name" class="form-control" type="text" tabindex="0" value="">
                    <span class="clearButton hide">
                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <ul class="ListMenuGroup ">
            <li class="ListMenuHeader">
                <span class="">Group</span>
                <span class="badge badge-muted">5 items</span>
            </li>
            <li class="">
                <span class="active" data-key="0">Lorem</span>
            </li>
            <li class="disabled">
                <span class="" data-key="1">Disabled Ipsum</span>
            </li>
            <li class="">
                <span class="" data-key="2">Dolor</span>
            </li>
            <li class="">
                <span class="" data-key="3">Sit amet</span>
            </li>
            <li class="">
                <span>No Link Sample</span>
            </li>
        </ul>
    </div>
</div>
```

#### Props: ListMenu

### ListMenu

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| menuItems | ListMenuItem<T>[] | — | List of menu item groups to be shown. |
| └group | string \| ReactNode | — | The optional group header to be shown. This can also be a component such as a FormattedMessage. |
| └groupNavItem | string \| ReactNode | — | The optional group header link to be shown. This can be a link component such as NavLink or Link. This way, the header can be a link itself. In this case, the group prop can be omitted. |
| └badge | string \| ReactNode | — | The optional badge displayed alongside the group or nav items. This can be text or a React node for additional flexibility. |
| └badgeType | 'muted' \| 'success' \| 'info' \| 'warning' \| 'danger' | — | The type of badge to display. Determines the visual style of the badge. Available types include: muted: A subdued badge style. success: Indicates a successful state. info: Represents informational content. warning: Warns of potential issues. danger: Highlights a critical state. |
| └navItems | T[] | — | The list of all menu items of a group. |
| enableFilter | boolean | false | Enables the filter. |
| focusFilter | boolean | false | Focus the filter input. |
| filterKey | keyof T | 'key' | Define the attribute key for filtering. |
| filterPlaceholder | string | — | The placeholder text for the filter input. |
| onFilterChange | (value: string) => void | — | Gets called when the filter input changes. |
| notFoundMessage | string \| ReactNode | — | A localized message to be shown when the filter result is empty. |
| responsive | boolean | true | The menu uses collapses on smaller screens using an expander panel. |
| autoClose | boolean | true | Enables automatic closing of the expander panel. Only relevant when using the responsive flag. Note: Make sure to not stop the events from bubbling up when clicking on a list item! Using event.stopPropagation() will prevent the panel from closing. |
| groupClassName | string | — | Additional classes to be set on the menu group element. |
| trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |
| className | string | — | Additional classes to be set on the wrapper element. |
| filterFn | ListMenuFilterFn<T> | — | Optional custom filter function. Use this when filtering should do more than a simple substring match, for example fuzzy ranking or multi-field weighting. |

#### Props: ListMenuNavItem

### ListMenuNavItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |
| item | string \| ReactNode | — | The menu nav item itself. This can be a simple <a>, <NavLink>, <Link>, <span> or even a <FormattedMessage>. |
| disabled | boolean | false | Disables the list item. |
| isSubItem | boolean | — | Whether the current menu item is a child of another menu item. |

## ListMenu with NavLinks

In case you want to navigate routes you can also use NavLink components.

In this example, all NavLinks are pointing to this ListMenu page.

### Example: Example 2

ListMenu with NavLinks
Group
Lorem
Lipsum
Dolor
Sit amet
No Link Sample

Another group
Lorem

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';

const getNavLinkClassName = ({ isActive }: { isActive: boolean }) => (isActive ? 'active' : '');

const menuItems: ListMenuItem[] = [
    {
        group: 'Group',
        navItems: [
            {
                key: 'Lorem',
                item: (
                    <NavLink className={getNavLinkClassName} to='/components/listMenu'>
                        Lorem
                    </NavLink>
                ),
            },
            {
                key: 'Lipsum',
                item: (
                    <NavLink className={getNavLinkClassName} to='/foo'>
                        Lipsum
                    </NavLink>
                ),
            },
            {
                key: 'Dolor',
                item: (
                    <NavLink className={getNavLinkClassName} to='/foo'>
                        Dolor
                    </NavLink>
                ),
            },
            {
                key: 'Sit amet',
                item: (
                    <NavLink className={getNavLinkClassName} to='/foo'>
                        Sit amet
                    </NavLink>
                ),
            },
            {
                key: 'No link',
                item: <span>No Link Sample</span>,
                isSubItem: true,
            },
        ],
    },
    {
        group: 'Another group',
        navItems: [
            {
                key: 'Lorem',
                item: (
                    <NavLink className={getNavLinkClassName} to='/bar'>
                        Lorem
                    </NavLink>
                ),
            },
        ],
    },
];

export default () => (
    <div>
        <h5 className='margin-bottom-20'>ListMenu with NavLinks</h5>
        <ListMenu menuItems={menuItems} />
    </div>
);
```

#### HTML (html)

```html
<div>
    <h5 class="margin-bottom-20">ListMenu with NavLinks</h5>
    <div class="ListMenu  ">
        <ul class="ListMenuGroup ">
            <li class="ListMenuHeader">
                <span class="">Group</span>
            </li>
            <li class="">
                <a aria-current="page" class="active" href="#/components/listMenu" data-discover="true">Lorem</a>
            </li>
            <li class="">
                <a class="" href="#/foo" data-discover="true">Lipsum</a>
            </li>
            <li class="">
                <a class="" href="#/foo" data-discover="true">Dolor</a>
            </li>
            <li class="">
                <a class="" href="#/foo" data-discover="true">Sit amet</a>
            </li>
            <li class="subitem">
                <span>No Link Sample</span>
            </li>
        </ul>
        <ul class="ListMenuGroup ">
            <li class="ListMenuHeader">
                <span class="">Another group</span>
            </li>
            <li class="">
                <a class="" href="#/bar" data-discover="true">Lorem</a>
            </li>
        </ul>
    </div>
</div>
```

#### Props: ListMenu

### ListMenu

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| menuItems | ListMenuItem<T>[] | — | List of menu item groups to be shown. |
| └group | string \| ReactNode | — | The optional group header to be shown. This can also be a component such as a FormattedMessage. |
| └groupNavItem | string \| ReactNode | — | The optional group header link to be shown. This can be a link component such as NavLink or Link. This way, the header can be a link itself. In this case, the group prop can be omitted. |
| └badge | string \| ReactNode | — | The optional badge displayed alongside the group or nav items. This can be text or a React node for additional flexibility. |
| └badgeType | 'muted' \| 'success' \| 'info' \| 'warning' \| 'danger' | — | The type of badge to display. Determines the visual style of the badge. Available types include: muted: A subdued badge style. success: Indicates a successful state. info: Represents informational content. warning: Warns of potential issues. danger: Highlights a critical state. |
| └navItems | T[] | — | The list of all menu items of a group. |
| enableFilter | boolean | false | Enables the filter. |
| focusFilter | boolean | false | Focus the filter input. |
| filterKey | keyof T | 'key' | Define the attribute key for filtering. |
| filterPlaceholder | string | — | The placeholder text for the filter input. |
| onFilterChange | (value: string) => void | — | Gets called when the filter input changes. |
| notFoundMessage | string \| ReactNode | — | A localized message to be shown when the filter result is empty. |
| responsive | boolean | true | The menu uses collapses on smaller screens using an expander panel. |
| autoClose | boolean | true | Enables automatic closing of the expander panel. Only relevant when using the responsive flag. Note: Make sure to not stop the events from bubbling up when clicking on a list item! Using event.stopPropagation() will prevent the panel from closing. |
| groupClassName | string | — | Additional classes to be set on the menu group element. |
| trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |
| className | string | — | Additional classes to be set on the wrapper element. |
| filterFn | ListMenuFilterFn<T> | — | Optional custom filter function. Use this when filtering should do more than a simple substring match, for example fuzzy ranking or multi-field weighting. |

#### Props: ListMenuNavItem

### ListMenuNavItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |
| item | string \| ReactNode | — | The menu nav item itself. This can be a simple <a>, <NavLink>, <Link>, <span> or even a <FormattedMessage>. |
| disabled | boolean | false | Disables the list item. |
| isSubItem | boolean | — | Whether the current menu item is a child of another menu item. |