Drawers

Drawers can be anchored to screen edges and provide navigation or supplementary content.

Temporary Drawer

Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.

The Drawer can be closed by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the open prop.

class TemporaryDrawer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      top: false,
      left: false,
      bottom: false,
      right: false,
    };
  }

  toggleDrawer(side, open) {
    this.setState({
      [side]: open,
    });
  }

  render() {
    const sideList = (
      <div style={{ width: 250 }}>
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    const fullList = (
      <div style={{ width: 'auto' }}>
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    return (
      <div>
        <Button onClick={() => this.toggleDrawer('left', true)} variant="text">
          Open Left
        </Button>
        <Button onClick={() => this.toggleDrawer('right', true)} variant="text">
          Open Right
        </Button>
        <Button onClick={() => this.toggleDrawer('top', true)} variant="text">
          Open Top
        </Button>
        <Button onClick={() => this.toggleDrawer('bottom', true)} variant="text">
          Open Bottom
        </Button>
        <Drawer open={this.state.left} onClose={() => this.toggleDrawer('left', false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('left', false)}
            onKeyDown={() => this.toggleDrawer('left', false)}
          >
            {sideList}
          </div>
        </Drawer>
        <Drawer anchor="top" open={this.state.top} onClose={() => this.toggleDrawer('top', false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('top', false)}
            onKeyDown={() => this.toggleDrawer('top', false)}
          >
            {fullList}
          </div>
        </Drawer>
        <Drawer
          anchor="bottom"
          open={this.state.bottom}
          onClose={() => this.toggleDrawer('bottom', false)}
        >
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('bottom', false)}
            onKeyDown={() => this.toggleDrawer('bottom', false)}
          >
            {fullList}
          </div>
        </Drawer>
        <Drawer
          anchor="right"
          open={this.state.right}
          onClose={() => this.toggleDrawer('right', false)}
        >
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('right', false)}
            onKeyDown={() => this.toggleDrawer('right', false)}
          >
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

class TemporaryDrawer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      top: false,
      left: false,
      bottom: false,
      right: false,
    };
  }

  toggleDrawer(side, open) {
    this.setState({
      [side]: open,
    });
  }

  render() {
    const sideList = (
      <div style={{ width: 250 }}>
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    const fullList = (
      <div style={{ width: 'auto' }}>
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <Inbox /> : <Mail />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    return (
      <div>
        <Button onClick={() => this.toggleDrawer('left', true)} variant="text">
          Open Left
        </Button>
        <Button onClick={() => this.toggleDrawer('right', true)} variant="text">
          Open Right
        </Button>
        <Button onClick={() => this.toggleDrawer('top', true)} variant="text">
          Open Top
        </Button>
        <Button onClick={() => this.toggleDrawer('bottom', true)} variant="text">
          Open Bottom
        </Button>
        <Drawer open={this.state.left} onClose={() => this.toggleDrawer('left', false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('left', false)}
            onKeyDown={() => this.toggleDrawer('left', false)}
          >
            {sideList}
          </div>
        </Drawer>
        <Drawer anchor="top" open={this.state.top} onClose={() => this.toggleDrawer('top', false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('top', false)}
            onKeyDown={() => this.toggleDrawer('top', false)}
          >
            {fullList}
          </div>
        </Drawer>
        <Drawer
          anchor="bottom"
          open={this.state.bottom}
          onClose={() => this.toggleDrawer('bottom', false)}
        >
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('bottom', false)}
            onKeyDown={() => this.toggleDrawer('bottom', false)}
          >
            {fullList}
          </div>
        </Drawer>
        <Drawer
          anchor="right"
          open={this.state.right}
          onClose={() => this.toggleDrawer('right', false)}
        >
          <div
            tabIndex={0}
            role="button"
            onClick={() => this.toggleDrawer('right', false)}
            onKeyDown={() => this.toggleDrawer('right', false)}
          >
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

Responsive Drawer

The Hidden responsive helper component allows showing different types of drawer depending on the screen width. A temporary drawer is shown for small screens while a permanent drawer is shown for wider screens.

Demo coming soon

Persistent Drawer

Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session.

When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport.

Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.

Demo coming soon

Mini Variant Drawer

In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer.

The mini variant is recommended for apps sections that need quick selection access alongside content.

Demo coming soon

Permanent Drawer

Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.

Permanent navigation drawers are the recommended default for desktop.

Demo coming soon

Drawers

Temporary Drawer

Responsive Drawer

Persistent Drawer

Mini Variant Drawer

Permanent Drawer

Properties

<Drawer />