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.

user_275414 · Answer

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 (
        <>
    
             alert(`selected ${selectedKey}`)}
            >
                
            
                Active
            
            
                Link
            
            
                Link
            
            
                
                Disabled
                
            
            
          
        
        );
  };
  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 (
        <>
         
                
                          
                      
                    
                    
                        this is a test
                     
                

            
        
        );
  };
  const Dashboard = withRouter(Dash);
  export default Dashboard

user_200044 · Answer

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';


  
    
      {/* Your brand icon */}
    
    
  
  
    
      
        
          {/* Menu item icon */}
        
        
          {/* Menu item title */}
        
      
    
    
      
        
        
          {/* Submenu title */}
        
      
      
        
          
            
              {/* Submenu item icon */}
            
            
              {/* Submenu item title */}

user_15087698 · Answer

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 (
        
            

            
                
                    
                        Application

                        
                            Settings
                        
                    
                
            
        
    );
};

const Application = (props) => {
    return (
        
            
                
                { props.children }
            
        
    );
};

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

user_12998127 · Answer

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 (
        
            
                }>
                    Dashboard
                
                
                    
                        
                            
                                Transfer
                            
                        
                        
                            
                                Transfer
                            
                        
                        
                            
                                Transfer
                            
                        
                        
                             
                                Transfer
                            
                        
                    
                
                
                    
                        sidebar footer
                    
                
            
        
    )
}

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

Make a sidebar from react-bootstrap

4 Answers