React Bootstrap Sidebar

We can create hidden sidebars for our application using the React Bootstrap Offcanvas component for the navigations, shopping carts, and more.

React Bootstrap Offcanvas Component

React Bootstrap allows us to create hidden sidebars for different positions. It includes headers with a close button and an optional body class for better alignment of the content with initial padding. However, we can use the Offcanvas without specifying the headers and body, but it is recommended to use the headers with dismissing an action to provide an explicit dismiss action.

To create the sidebar using the Offcanvas component, specify the <Offcanavs>, <Offcanvas.Header>, <Offcanvas.body>, and <Offcanvas.Footer> components with their content. They will be imported as follows:

We can handle the toggle functionality by updating the state of the Offcanvas component.

Consider the below example:

App.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Offcanvas } from 'react-bootstrap';
import {useState} from 'react'
function App() {
  const [show, setShow] = useState(false);
  const closeSidebar = () => setShow(false);
  const showSidebar = () => setShow(true);
  return (
    <>
    <Container className='p-4'>
      <Button variant="primary" onClick={showSidebar}>
        Launch Sidebar
      </Button>
      <Offcanvas show={show} onHide={closeSidebar}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Sidebar Title</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some dummy text, we can have any text or element at at this place.
        </Offcanvas.Body>
      </Offcanvas>
      </Container>
    </>
  );
}
export default App;

Output:

From the above example, it will render the Launch Sidebar button. When we click on this button, it will open the sidebar. By default, the canvas position is start, so, it will open from the left side. We can use any components or icons to display the sidebar instead of the button component.

When we click on the Launch Sidebar button, we will get the following output:

We can also have a vertical navigation menu at the sidebar elements. For rendering the navigation, we can use the Nav component.

Positioning the Offcanvas

We can position the offcanvas in different directions. It supports the following positions to open the Offcanvas component. We can specify these positions using the placement prop.

start: The start value will position the offcanvas on the left of the viewport.

end: The end value will position the container on the right of the viewport

top: The top value will position the container on the top of the viewport

bottom: The bottom value will position the container on the bottom of the viewport.

Let's understand it with the following example:

App.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Offcanvas } from 'react-bootstrap';
import {useState} from 'react'
function App() {
  const [show, setShow] = useState(false);
  const closeSidebar = () => setShow(false);
  const showSidebar = () => setShow(true);

  return (
    <>
    <Container className='p-4'>
      <Button variant="primary" onClick={showSidebar}>
        Launch Sidebar
      </Button>
      <Offcanvas placement='end' show={show} onHide={closeSidebar}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Sidebar Title</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some dummy text, we can have any text or element at this place.
        </Offcanvas.Body>
      </Offcanvas>
      </Container>
    </>
  );
}
export default App;

Output:

The above sidebar starts from the right side of the viewport. Similarly, we can use the top and bottom values accordingly.

Offcanvas Backdrop

Offcanvas supports several backdrop properties to control the sidebar behavior. The default behavior of the Offcanvas will prevent the body scroll and will be closed when clicking on the outside sidebar. But, we can overwrite this behavior by using the scroll and backdrop prop.

Consider the below example:

App.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Offcanvas } from 'react-bootstrap';
import {useState} from 'react'
function App() {
  const [show, setShow] = useState(false);
  const closeSidebar = () => setShow(false);
  const showSidebar = () => setShow(true);

  return (
    <>
    <Container className='p-4'>
      <Button variant="primary" onClick={showSidebar}>
        Launch Sidebar
      </Button>
      <Offcanvas backdrop='false' show={show} onHide={closeSidebar}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Sidebar Title</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          In this OffCanvas backdrop will not work.
        </Offcanvas.Body>
      </Offcanvas>
      </Container>
    </>
  );
}
export default App;

Output:

From the above output, the backdrop overlay functioning will not work when we click on the backdrop overlay; It will not close the sidebar.

Enabling Body Scrolling

By default, the Offcanvas blocks the body scrolling when displayed, but we can overwrite this behavior by passing the scroll= "true" value to the Offcanvas component.

Next TopicReact Bootstrap Tables

← prev next →