Make a sidebar from react-bootstrap

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.

3 Answers

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
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}> <Sidebar /> </Col> <Col xs={10}> this is a test </Col> </Row> </Container> </> ); }; const Dashboard = withRouter(Dash); export default Dashboard 

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:

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 follow this link to see