Material UI — Breadcrumbs and Drawers

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 breadcrumb styling and drawers to Material UI.

Customized Breadcrumbs

We can add styles to breadcrumb items by using the withStyles higher-order component.

For instance, we can write:

import React from "react";
import Breadcrumbs from "@materialui/core/Breadcrumbs";
import { emphasize, withStyles } from "@materialui/core/styles";
import Chip from "@materialui/core/Chip";
import HomeIcon from "@materialui/icons/Home";

const StyledBreadcrumb = withStyles(theme => ({
  root: {
    backgroundColor: theme.palette.grey[100],
    height: theme.spacing(6),
    "&:hover, &:focus": {
      backgroundColor: theme.palette.grey[300]
    },
    "&:active": {
      boxShadow: theme.shadows[1],
      backgroundColor: emphasize(theme.palette.grey[300], 0.12)
    }
  }
}))(Chip);

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs>
      <StyledBreadcrumb
        href="#"
        label="home"
        icon={<HomeIcon fontSize="small" />}
        onClick={handleClick}
      />
      <StyledBreadcrumb
        href="#"
        label="profile"
        onClick={handleClick}
      />
      <StyledBreadcrumb
        label="settings"
        onClick={handleClick}
        onDelete={handleClick}
      />
    </Breadcrumbs>
  );
}

We use the withStyles higher-order component to add some styles to a Chip component to add styles to a rounded box.

We ads the label onClick and onDelete prop as with any regular breadcrumb item.

Integration with react-router

We can incorporate React Router links to our breadcrumbs.

For example, we can write:

import React from "react";
import Breadcrumbs from "@materialui/core/Breadcrumbs";
import { Route, MemoryRouter } from "react-router";
import { Link as RouterLink } from "react-router-dom";
import Link from "@materialui/core/Link";

const LinkRouter = props => <Link {...props} component={RouterLink} />;

export default function App() {
  return (
    <div>
      <MemoryRouter initialEntries={["/"]} initialIndex={0}>
        <Route>
          {({ location }) => {
            return (
              <Breadcrumbs aria-label="breadcrumb">
                <LinkRouter color="inherit" to="/">
                  home
                </LinkRouter>
                <LinkRouter color="inherit" to="/profile">
                  profile
                </LinkRouter>
                <LinkRouter color="inherit" to="/settings">
                  settings
                </LinkRouter>
              </Breadcrumbs>
            );
          }}
        </Route>
      </MemoryRouter>
    </div>
  );
}

to create a LinkRouter component to return the Link component that we display in the breadcrumbs.

We pass in the to prop to our LinkRouter component to set the URL that the link goes to.

Drawer

A nav drawer lets us access destinations within our app.

It’s displayed on the side and has links to let us click on them.

For instance, we can write:

import React from "react";
import Drawer from "@materialui/core/Drawer";
import ListItemIcon from "@materialui/core/ListItemIcon";
import ListItem from "@materialui/core/ListItem";
import ListItemText from "@materialui/core/ListItemText";
import List from "@materialui/core/List";
import MailIcon from "@materialui/icons/Mail";

export default function App() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = event => {
    setOpen(false);
  };
  return (
    <div>
      <Drawer anchor="left" open={open} onClose={toggleDrawer}>
        <List>
          <ListItem button key="home">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="home" />
          </ListItem>
          <ListItem button key="profile">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="profile" />
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

We have the Drawer component with a anchor prop to make it display in the position that we want.

anchor can also be right , top or bottom .

open has the open state of the drawer.

onClose has a function that’s called when it’s closed.

We then render the drawer with the Drawer component.

Inside it, we have a List with some ListItem s.

ListItemIcon has the icon of each entry.

ListItemText has the item text.

Swipeable Drawer

We can add a SwipeableDrawer to make the drawer swipeable.

This works better on mobile devices.

For example, we can write:

import React from "react";
import ListItemIcon from "@materialui/core/ListItemIcon";
import ListItem from "@materialui/core/ListItem";
import ListItemText from "@materialui/core/ListItemText";
import List from "@materialui/core/List";
import MailIcon from "@materialui/icons/Mail";
import SwipeableDrawer from "@materialui/core/SwipeableDrawer";

export default function App() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = event => {
    setOpen(false);
  };
  return (
    <div>
      <SwipeableDrawer anchor="left" open={open} onClose={toggleDrawer}>
        <List>
          <ListItem button key="home">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="home" />
          </ListItem>
          <ListItem button key="profile">
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="profile" />
          </ListItem>
        </List>
      </SwipeableDrawer>
    </div>
  );
}

All we did is replace Drawer and SwipeableDrawer .

Conclusion

We can customize our breadcrumbs by changing its styles and content.

It also integrates with React Router.

We can add a drawer to add a sidebar.