---
title: Inner Side Menu
description: InnerSideMenu is a component that provides a collapsible side menu with multiple sections.
component: true
---
## Examples
{/* ### Multiple sections */}
{/* */}
### Collapsible menus
Inner Side Menu uses the `` component to wrap the menu items.
This is a wrapper component around the `` component.
```jsx {10-12,16-17}
import {
InnerSideMenuCollapsible,
InnerSideMenuCollapsibleTrigger,
InnerSideMenuCollapsibleContent,
InnerSideMenuItem,
} from 'ui-patterns/InnerSideMenu'
function app() {
return (
DashboardTeamSettings
)
}
```
### Static titles
If you don't need the Collapsible features, you can instead use ``.
This doesn't require the use of the `` parent component wrapped around it.
You can wrap the `` conponents however you like. Below we've put a `
` around them.
```jsx {1}
Projects
DashboardTeamSettings
```
### Loading state
Use `` to show a loading state for menu items.
This item is a wrapper around the `` component, and also includes some y-padding so the items don't layout shift when shifting to loaded state and to look visually separated in a list.
### With search
Use the following components to add a search input to the menu.
```jsx
setSearchTerm(e.target.value)}
aria-labelledby="Search items"
/>
```
There is also a Filter Dropdown component that can be used to sort the menu items.
This can be used inside ``.
```jsx {9-16}
setSearchTerm(e.target.value)}
aria-labelledby="Search items"
>
setSort(value)}>
Sort Alphabetically
Sort Reverse Alphabetically
```
### Empty list state
Use `` to show an empty state.
Use the `actions` prop to add any actions like a ``.
```jsx {4-7}
Create Function
}
/>
```
You can also use the prop `illustration` to pass in a custom illustration, it accets any React Node.
```jsx {4-7}
}
/>
```