> For the complete documentation index, see [llms.txt](https://pavewise.gitbook.io/pavewise-style-guide-and-more/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/components/mui/choosing-components.md).

# Choosing Components

When to use what component

### Overview

* **MUI**
  * [Menu/MenuItem vs List/ListItem](#menu-menuitem-vs-list-listitem)

***

## Menu/MenuItem vs List/ListItem

***

### **Menu/MenuItem** [**->**](https://mui.com/material-ui/react-menu/)

* **Primary use case:** "temporary" lists
  * Lists that appear upon interaction: right-click, clicking a button, etc.
  * (drop-downs, context menus, ...)
* **Reason(s):**
  * Clicking a `<MenuItem />` typically closes a `<Menu />`
  * Has built-in styles and animation for entering/exiting the screen
* **Other info:**
  * `<Menu />,<MenuItem />` components are technically wrappers around `<List />`, `<ListItem />` components

### **List/ListItem** [**->**](https://mui.com/material-ui/react-list/)

* **Primary use case:**  "persistent" lists
  * (navigation, sidebars, within MUI `<Drawer />` components, ...)
* **Reason(s):**
  * Clicking a `<ListItem />` doesn't close `<List />` by default
  * Easily paired with `<ListItemIcon />`, `<ListItemText />`, `<Divider />`, etc. for more structured and styled options (e.g. navigation)&#x20;

***