Material UI — Lists

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add lists with Material UI.

Interactive Lists

We can add various kinds of lists with Material UI.

The simplest kind if the ones with only texts in each entry.

To add a text-only list, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We add a list with all text by using the ListItemText component.

primary is the primary text to display for each item.

To add a list with icons, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemIcon>
              <FolderIcon />
            </ListItemIcon>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We have the ListItemIcon to position the icon.

FolderIcon has the icon.

The icon will be displayed on the left of the text.

Also, we can add avatars in a similar way.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Then we have an avatar of the folder icon on the left of the text instead of just the folder icon itself.

We use the ListItemAvatar to surround the Avater and FolderIcon to place them properly.

We can also add an icon to the right of the text.

It’ll be placed on the right edge of the list item.

To do that, we can use the ListItemSecondaryAction component.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} key={f.key} />
            <ListItemSecondaryAction>
              <IconButton edge="end">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to add the ListItemSecondaryAction below the ListItemText .

This will place the secondary action icon on the right edge.

Align List Items

To align list items when displaying 3 lines or more, we can set the alignItems prop to flex-start .

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem alignItems="flex-start" key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText
              primary={f.name}
              secondary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis, metus vitae vestibulum suscipit, eros nisi ultrices urna, facilisis dictum erat dolor non justo. "
            />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to move the icon slightly down to align better with the long text.

Conclusion

We can make lists with icons in various locations.

The icon can be on the left or the right of the text.