Make a sidebar from react-bootstrap

Question

I am trying to create a Bootstrap sidebar like this picture here.

I have looked at all the code on react-bootstrap and Twitter Bootstrap and I am yet to find a how-to code this. Basically, if they are viewing on a desktop, I want the sidebar to be visible, otherwise hidden.

The sidebar should stay still while the content on the page scrolls up and down.

Answer 1

Ok so for people who want to make a sidebar sadly the news is you gotta make it all yourself.

What I have done is the following.

1. See the example at https://github.com/StartBootstrap/startbootstrap-simple-sidebar
2. Create sidebar.js somewhere in your app.

import React from "react"; import {Nav} from "react-bootstrap"; import { withRouter } from "react-router"; import '../pages/style/Dashboard.css'  const Side = props => {          return (         <>                  <Nav className="col-md-12 d-none d-md-block bg-light sidebar"             activeKey="/home"             onSelect={selectedKey => alert(`selected ${selectedKey}`)}             >                 <div className="sidebar-sticky"></div>             <Nav.Item>                 <Nav.Link href="/home">Active</Nav.Link>             </Nav.Item>             <Nav.Item>                 <Nav.Link eventKey="link-1">Link</Nav.Link>             </Nav.Item>             <Nav.Item>                 <Nav.Link eventKey="link-2">Link</Nav.Link>             </Nav.Item>             <Nav.Item>                 <Nav.Link eventKey="disabled" disabled>                 Disabled                 </Nav.Link>             </Nav.Item>             </Nav>                    </>         );   };   const Sidebar = withRouter(Side);   export default Sidebar 

3. My Dashboard.css has the following in it.

 .sidebar {         position: fixed;         top: 0;         bottom: 0;         left: 0;         min-height: 100vh !important;         z-index: 100;         padding: 48px 0 0;         box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);     }     #sidebar-wrapper{         min-height: 100vh !important;         width: 100vw;         margin-left: -1rem;         -webkit-transition: margin .25s ease-out;         -moz-transition: margin .25s ease-out;         -o-transition: margin .25s ease-out;         transition: margin .25s ease-out;     }     #sidebar-wrapper .sidebar-heading {         padding: 0.875rem 1.25rem;         font-size: 1.2rem;     }          #page-content-wrapper {         min-width: 0;         width: 100%;     } 

Then final step In the file you want it to be show in do the following

import React from "react"; import {Container, Row, Col, Card, Form, Button } from "react-bootstrap"; import { withRouter } from "react-router"; import Sidebar from "../moduls/sidebar.js"; import './style/Dashboard.css'  const Dash = props => {          return (         <>          <Container fluid>                 <Row>                     <Col xs={2} id="sidebar-wrapper">                             <Sidebar />                     </Col>                     <Col  xs={10} id="page-content-wrapper">                         this is a test                     </Col>                  </Row>              </Container>         </>         );   };   const Dashboard = withRouter(Dash);   export default Dashboard 

Answer 2

As of 2022 there is pure react-boostrap based component called react-boostrap-sidebar-menu . It is the cleanest solution so far and quite customizable.

https://www.npmjs.com/package/react-bootstrap-sidebar-menu

https://github.com/ivp-dev/react-bootstrap-sidebar-menu

import SidebarMenu from 'react-bootstrap-sidebar-menu';

<SidebarMenu>
  <SidebarMenu.Header>
    <SidebarMenu.Brand>
      {/* Your brand icon */}
    </SidebarMenu.Brand>
    <SidebarMenu.Toggle />
  </SidebarMenu.Header>
  <SidebarMenu.Body>
    <SidebarMenu.Nav>
      <SidebarMenu.Nav.Link>
        <SidebarMenu.Nav.Icon>
          {/* Menu item icon */}
        </SidebarMenu.Nav.Icon>
        <SidebarMenu.Nav.Title>
          {/* Menu item title */}
        </SidebarMenu.Nav.Title>
      </SidebarMenu.Nav.Link>
    <SidebarMenu.Nav/>
    <SidebarMenu.Sub>
      <SidebarMenu.Sub.Toggle>
        <SidebarMenu.Nav.Icon />
        <SidebarMenu.Nav.Title>
          {/* Submenu title */}
        </SidebarMenu.Nav.Title>
      </SidebarMenu.Sub.Toggle>
      <SidebarMenu.Sub.Collapse>
        <SidebarMenu.Nav>
          <SidebarMenu.Nav.Link>
            <SidebarMenu.Nav.Icon>
              {/* Submenu item icon */}
            </SidebarMenu.Nav.Icon>
            <SidebarMenu.Nav.Title>
              {/* Submenu item title */}
            </SidebarMenu.Nav.Title>
          </SidebarMenu.Nav.Link>
        </SidebarMenu.Nav>
      </SidebarMenu.Sub.Collapse>
    </SidebarMenu.Sub>
  <SidebarMenu.Body/>
</SidebarMenu>

Answer 3

One can now use a library, react-bootstrap-drawer, which provides a sidenav / drawer which was taken directly from the react-bootstrap documentation. Oddly, this is not a component provided by the library itself so one must use a third-party library:

import 'react-bootstrap-drawer/lib/style.css';
import React, { useState } from 'react';
import {
    Col,
    Collapse,
    Container,
    Row,
} from 'react-bootstrap';
import { Drawer, } from 'react-bootstrap-drawer';

const ApplicationDrawer = (props) => {
    const [open, setOpen] = useState(false);

    const handleToggle = () => setOpen(!open);

    return (
        <Drawer { ...props }>
            <Drawer.Toggle onClick={ handleToggle } />

            <Collapse in={ open }>
                <Drawer.Overflow>
                    <Drawer.ToC>
                        <Drawer.Header href="/">Application</Drawer.Header>

                        <Drawer.Nav>
                            <Drawer.Item href="/settings">Settings</Drawer.Item>
                        </Drawer.Nav>
                    </Drawer.ToC>
                </Drawer.Overflow>
            </Collapse>
        </Drawer>
    );
};

const Application = (props) => {
    return (
        <Container fluid>
            <Row className="flex-xl-nowrap">
                <Col as={ ApplicationDrawer } xs={ 12 } md={ 3 } lg={ 2 } />
                <Col xs={ 12 } md={ 9 } lg={ 10 }>{ props.children }</Col>
            </Row>
        </Container>
    );
};

See: https://github.com/SimpleSigner/react-bootstrap-drawer