Choosing Components

When to use what component

Overview

• MUI

  • Menu/MenuItem vs List/ListItem

---

Menu/MenuItem vs List/ListItem

---

Menu/MenuItem ->

• 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 ->

• 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)

---