List

The List component is a versatile component for displaying lists of items. It supports nested items, icons, and collapsible sections, making it perfect for navigation menus and item collections.

---

Python Dash Example

Below is an example of how to use the List component in a Python Dash application.

import dash
from dash.dependencies import Input, Output, State
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider([
    dmc.Box([
        dmc.List([
            dmc.ListSubheader("Nested List Items"),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.Download()),
                dmc.ListItemText(primary="Downloads")
            ]),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.Info()),
                dmc.ListItemText(primary="Information")
            ]),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.MoreVert()),
                dmc.ListItemText(primary="More Options"),
                dmc.Box(id="expand-icon", sx={"display": "flex", "justify-content": "center", "align-items": "center"}, children=[dmc.ExpandMore()])
            ], id="collapse-button", n_clicks=0),
            dmc.Collapse([
                dmc.List(
                    component="div",
                    children=[
                      dmc.ListItemButton([
                          dmc.ListItemIcon(dmc.Download()),
                          dmc.ListItemText(primary="Nested Option 1")
                      ], sx={"pl": "32px"}),
                      dmc.ListItemButton([
                          dmc.ListItemIcon(dmc.Info()),
                          dmc.ListItemText(primary="Nested Option 2")
                      ], sx={"pl": "32px"})
                    ]
                )
            ], id="nested-list", in_=False)
        ], sx={"width": "100%", "maxWidth": 360, "bgcolor": "background.paper"})
    ])
])

@app.callback(
    [Output("nested-list", "in_"),
     Output("expand-icon", "children")],
    Input("collapse-button", "n_clicks"),
    prevent_initial_call=True
)
def toggle_nested_list(n_clicks):
    is_open = bool(n_clicks % 2) 
    if is_open:
        return True, [dmc.ExpandLess()]
    return False, [dmc.ExpandMore()]

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the props for the List component and its related components:

List Props

Prop	Type	Default	Description
component	string	'ul'	The component used for the root node.
sx	object		The system prop that allows defining system overrides.

ListItemButton Props

Prop	Type	Default	Description
onClick	function	undefined	Callback fired when the button is clicked.
selected	boolean	false	If true, the list item will be selected.
sx	object		The system prop that allows defining system overrides.

ListItemText Props

Prop	Type	Default	Description
primary	node	undefined	The primary text to display.
secondary	node	undefined	The secondary text to display.

Collapse Props

Prop	Type	Default	Description
in	boolean	false	If true, the component will transition in.
timeout	number or object	300	The duration for the transition, in milliseconds.

For the full list of props, refer to the official MUI documentation, as these components are based on MUI:

MUI List Documentation