Offcanvas

React Bootstrap Offcanvas - free examples, templates & tutorial

Responsive React Offcanvas sidebar built with Bootstrap 5. Examples include offcanvas width customization, double offcanvas example, left and right hidden menu & more

If you need a more advanced Offcanvas and more options, see our main SideNav documentation. This component is sometimes also referred to as Sidebar or Drawer navigation.

Basic example

Via our sidenav component, you can easily create custom offcanvas component.

Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. 
import React, { useState } from "react";
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBBtn,
MDBIcon,
MDBTypography,
} from "mdb-react-ui-kit";

export default function App() {
const [basicOpen, setBasicOpen] = useState(true);

return (
<>
  <MDBSideNav isOpen={basicOpen} absolute getOpenState={(e)=> setBasicOpen(e)}
    >
    <MDBSideNavMenu>
      <MDBSideNavItem className="d-flex justify-content-between px-2 py-3">
        <MDBTypography tag="h5">Offcanvas</MDBTypography>
        <MDBIcon className="btn-close text-reset" onClick={()=> setBasicOpen(false)}
          ></MDBIcon>
      </MDBSideNavItem>

      <MDBSideNavItem className="px-2">
        <p>
          Content for the offcanvas goes here. You can place just about any
          Bootstrap component or custom elements here.
        </p>
      </MDBSideNavItem>
    </MDBSideNavMenu>
  </MDBSideNav>

  <div style={{ padding: "20px" }} className="text-center">
    <MDBBtn onClick={()=> setBasicOpen(!basicOpen)}>
      <MDBIcon fas icon="bars" />
    </MDBBtn>
  </div>
</>
);
}

Placement Right

Place the navigation on the other side by setting the right property to true. 

import React, { useState } from 'react';
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBSideNavCollapse,
MDBBtn,
MDBIcon
} from 'mdb-react-ui-kit';

export default function App() {
const [rightOpen, setRightOpen] = useState(true);
const [rightCollapse1, setRightCollapse1] = useState(true);
const [rightCollapse2, setRightCollapse2] = useState(false);

return (
<>
  <MDBSideNav right isOpen={rightOpen} absolute getOpenState={(e: any)=> setRightOpen(e)}>
    <MDBSideNavMenu>
      <MDBSideNavItem className="d-flex justify-content-between px-2 py-3">
        <MDBTypography tag="h5">Offcanvas</MDBTypography>
        <MDBIcon className="btn-close text-reset" onClick={()=> setBasicOpen(false)}></MDBIcon>
      </MDBSideNavItem>

      <MDBSideNavItem className="px-2">
        <p>
          Content for the offcanvas goes here. You can place just about any
          Bootstrap component or custom elements here.
        </p>
      </MDBSideNavItem>
    </MDBSideNavMenu>
  </MDBSideNav>

  <div style={{ padding: '20px' }} className='text-center'>
    <MDBBtn onClick={()=> setRightOpen(!rightOpen)}>
      <MDBIcon fas icon='bars' />
    </MDBBtn>
  </div>
</>
);
}

Backdrop

Scrolling the <body> element is avaible when an offcanvas and its backdrop are visible. Use the useEffect hook to toggle <body> scrolling and backdrop props to toggle the backdrop.

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdrop with scrolling

Try scrolling the rest of the page to see this option in action. 

import React, { useCallback, useEffect, useState } from "react";
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBBtn,
MDBIcon,
MDBTypography,
} from "mdb-react-ui-kit";

export default function App() {
const [basicOpen, setBasicOpen] = useState(false);
const [basicOpen2, setBasicOpen2] = useState(false);
const [basicOpen3, setBasicOpen3] = useState(false);

useEffect(() => {
if (basicOpen3) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
}, [basicOpen3]);

return (
<>
  <div style={{ padding: "20px" , height: "120vh" }} className="text-center">
    <MDBBtn onClick={()=> setBasicOpen(!basicOpen)}>
      Enable both scrolling & backdrop
    </MDBBtn>

    <MDBBtn onClick={()=> setBasicOpen2(!basicOpen2)}>
      Enable body scrolling
    </MDBBtn>

    <MDBBtn onClick={()=> setBasicOpen3(!basicOpen3)}>
      Enable backdrop
    </MDBBtn>
  </div>

  <MDBSideNav isOpen={basicOpen} getOpenState={(e)=> setBasicOpen(e)}
    style={{ width: "400px" }}
    >
    <MDBSideNavMenu>
      <MDBSideNavItem className="d-flex justify-content-between px-2 py-3">
        <MDBTypography tag="h5">Backdrop with scrolling</MDBTypography>
        <MDBIcon className="btn-close text-reset" onClick={()=> setBasicOpen(false)}
          ></MDBIcon>
      </MDBSideNavItem>

      <MDBSideNavItem className="px-2">
        <p>
          Try scrolling the rest of the page to see this option in action.
        </p>
      </MDBSideNavItem>
    </MDBSideNavMenu>
  </MDBSideNav>

  <MDBSideNav isOpen={basicOpen2} getOpenState={(e)=> setBasicOpen2(e)}
    style={{ width: "400px" }}
    backdrop={false}
    >
    <MDBSideNavMenu>
      <MDBSideNavItem className="d-flex justify-content-between px-2 py-3">
        <MDBTypography tag="h5">Backdrop with scrolling</MDBTypography>
        <MDBIcon className="btn-close text-reset" onClick={()=> setBasicOpen2(false)}
          ></MDBIcon>
      </MDBSideNavItem>

      <MDBSideNavItem className="px-2">
        <p>
          Try scrolling the rest of the page to see this option in action.
        </p>
      </MDBSideNavItem>
    </MDBSideNavMenu>
  </MDBSideNav>

  <MDBSideNav isOpen={basicOpen3} getOpenState={(e)=> setBasicOpen3(e)}
    style={{ width: "400px" }}
    >
    <MDBSideNavMenu>
      <MDBSideNavItem className="d-flex justify-content-between px-2 py-3">
        <MDBTypography tag="h5">Backdrop with scrolling</MDBTypography>
        <MDBIcon className="btn-close text-reset" onClick={()=> setBasicOpen3(false)}
          ></MDBIcon>
      </MDBSideNavItem>

      <MDBSideNavItem className="px-2">
        <p>
          Try scrolling the rest of the page to see this option in action.
        </p>
      </MDBSideNavItem>
    </MDBSideNavMenu>
  </MDBSideNav>
</>
);
}