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.

Are you asking how to create this sidebar while using bootstrap? Or are you asking how to make it, regardless of whether we use bootstrap or not? The sidebar can be easily made without bootstrap. — AskYous, Mar 02 '20 at 03:44
@AskYous needed to be bootstrap as that is the system we are using - see my answer below. — RussellHarrower, Mar 02 '20 at 03:50

score 61 · Accepted Answer · edited Nov 02 '20 at 20:25

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.

See the example at https://github.com/StartBootstrap/startbootstrap-simple-sidebar
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

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

Isn't work because sidenav width doesn't allow click other elements — Ivandez, Oct 25 '21 at 22:41
its no longer true , check here : https://github.com/ivp-dev/react-bootstrap-sidebar-menu — Phyo Arkar Lwin, Aug 15 '22 at 17:28
@Nanda try this: https://react-bootstrap.github.io/components/accordion/ — Yumin Gui, Dec 12 '22 at 06:35

Phyo Arkar Lwin · Answer 2 · 2022-07-18T18:32:29.407

3

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>

edited Jul 18 '22 at 18:32

answered Jul 18 '22 at 18:27

Phyo Arkar Lwin

6,673
12
41
55

1

is there page where i can see a menu implemented using this library? in the demo page I can't see the react code that uses this library. @phyo arkar Lwin – itpragmatik Aug 09 '22 at 17:23
1

The demopage is the one that use it. Don't be afraid to dive into the source code. : https://github.com/ivp-dev/react-bootstrap-sidebar-menu/blob/main/www/src/pages/app.tsx – Phyo Arkar Lwin Aug 15 '22 at 17:27
4

Library is broken and lacks documentation. Don't waste any time on in like I did – NecipAllef Sep 18 '22 at 14:30
@NecipAllef Lib works fine, if ~270 repo use it. Maybe its better to check your code. Please, share your example we can find a solution. Best regards – Vadim Nov 13 '22 at 12:10
I don't have the code right now, but let's just say it works for your case and some others and that's it. Honestly, any library that lacks documentation is not worth using because it shows the lack of faith by the owner. If you choose to use it, good luck @Vadim – NecipAllef Nov 13 '22 at 13:40
@NecipAllef It difficult to find the lib covers all cases. But the lib has documentation (https://ivp-dev.github.io/react-bootstrap-sidebar-menu) and working example with source code. If you have any issue just ask. But I think you need something easy to use without any affort from your side, in this case good luck. – Vadim Nov 13 '22 at 15:56
Who is going to click on a link called "Demo" and expect to see documentation? No wonder the library has just a handful of stars. By the way, I remember spending a couple of hours trying to accomplish a task with this library and failing. I am not looking for an effortless solution, I am just telling other people to not waste time on this library as I did. Best, regards, later @Vadim – NecipAllef Nov 13 '22 at 18:08
@NecipAllef No wonder you failed if you even din't check the demo. Do you always suggest others do not waste time on things you failed with? – Vadim Nov 13 '22 at 18:34
I only suggest others to not waste time on things when it is nothing but a waste of time. I don't know why you think I didn't check the demo. I don't know why you still insist on arguing with me. You can't change my mind or my comment. The library sucks, sorry. @Vadim – NecipAllef Nov 14 '22 at 09:34
@NecipAllef If you can't set up styles from bootstrap to make it works your opinion is as useless as your suggestion – Vadim Nov 14 '22 at 15:23
Here is an example of this lib - https://codesandbox.io/s/react-bootstrap-sidebar-menu-ck23cz – Vadim Nov 16 '22 at 16:09

score 1 · Answer 3 · answered May 05 '21 at 22:53

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

score 1 · Answer 4 · answered Jun 06 '21 at 11:11

of course, you have to make the navbar yourself and the examples above are very valid, but cdbreact speeds up the process a lot faster. just add cdbreact using

npm I cdbreact

or

yarn add cdbreact

and then import CDBSidebar, CDBSidebarContent, CDBSidebarHeader, etc. with cdbreact, you don't need to bother about installing bootsrap in your react app. cdbreact also comes with icons, and a lot more.

import React from 'react' import {CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem} from 'cdbreact'; import {NavLink, Link} from 'react-router-dom'; import {} from 'react-router-dom';

const Sidebar=()=>{
    return (
        <div style={{display:'flex', height:'100%', overflow:'scroll initial'}}>
            <CDBSidebar textColer="#fff" backgroundColor="rgb(37, 90, 122)">
                <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
                    <Link to="/dashboard">Dashboard</Link>
                </CDBSidebarHeader>
                <CDBSidebarContent className="sidebar-content">
                    <CDBSidebarMenu>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                             <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                    </CDBSidebarMenu>
                </CDBSidebarContent>
                <CDBSidebarFooter style={{textAlign:'center'}}>
                    <div className="sidebar-btn-wrapper" style={{ padding :'20px 5px' }}>
                        sidebar footer
                    </div>
                </CDBSidebarFooter>
            </CDBSidebar>
        </div>
    )
}

export default Sidebar;

you can also follow the guide here https://dev.to/devwares/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi2 follow this link to see

For the life of me, I haven't been able to use cdbreact despite it being installed. Seems it's not an issue with the package itself. — siya, Nov 04 '21 at 13:32
can you share what your challenge is? error message or something — Badmous, Nov 05 '21 at 14:35
Last update in Github: 5 months ago. Is this project alive or dead? I tried to install but got errors on installation. — BertC, Feb 15 '22 at 10:17
what is the errors? you can either use mdbreact or cdbreact. they are similarly the same. what is your error you are getting? — Badmous, Feb 16 '22 at 09:11

gunslingor · Answer 5 · 2023-05-21T06:52:44.183

One can do it using pure react-bootstrap. The trick is to use collapse for the the dropdown and use composition

SideBar

const SideBar = ({children}) => {
  return <Nav className={'flex-column'}>{children}</Nav>
}

SideBar.Dropdown = SideBarDropdown
SideBar.Item = SideBarItem

export default SideBar

SideBarDropdown (note the collapse)

const SideBarDropdown = ({title, children}) => {
  const [open, setOpen] = useState(false);
  return (
    <Container fluid className={'p-0 m-0'}>
      <Nav.Item onClick={() => setOpen(!open)} className={'p-0 m-0'}>
          {/*Your Dropdown Text*/}
      </Nav.Item>
      <Collapse in={open}>
        <div> {children} </div>
      </Collapse>
    </Container>
  )
}
export default SideBarDropdown

SideBarItem

const SideBarItem = ({title, value, onClick}) => {
  return (
    <Container fluid className={'p-0 m-0'}>
      <Nav.Item onClick={onClick} className={'p-0 m-0'}>
          {/*Your Dropdown Text*/}
      </Nav.Item>
    </Container>
  )
}

export default SideBarItem

Sample Use Case

const ToolsSidebar = ({ setCurrentTool, currentTool }: SideNavProps) => {
  return (
    <SideBar>
      <SideBar.Dropdown title={'Datasets'}>
        <SideBar.Item title={'Files'} value={'some_files'} />
        <SideBar.Item title={'Documents'} value={'something_else'} />
      </SideBar.Dropdown>
      <SideBar.Dropdown title={'Title1'}>
        <SideBar.Item title={'Creator'} value={'some_writer'} />
        <SideBar.Item title={'Components List'} value={'some_list'} />
      </SideBar.Dropdown>
    </SideBar>
  )
}
export default ToolsSidebar

Hi, can you explain the reasoning behind `SideBar.Dropdown = SideBarDropdown` and `SideBar.Item = SideBarItem`? — Nashit Shayan, Jul 20 '23 at 06:30

Make a sidebar from react-bootstrap

5 Answers5