/Javascript/Bootstrap/React-bootstrap sidebar menu

React-bootstrap sidebar menu

React-bootstrap sidebar

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;

Source: stackoverflow.com

React-bootstrap sidebar menu

1import React from 'react';2import {3  CDBSidebar,4  CDBSidebarContent,5  CDBSidebarFooter,6  CDBSidebarHeader,7  CDBSidebarMenu,8  CDBSidebarMenuItem,9} from 'cdbreact';10import { NavLink } from 'react-router-dom';1112const Sidebar = () => {13  return (14    <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>15      <CDBSidebar textColor="#fff" backgroundColor="#333">16        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>17          <a href="/" className="text-decoration-none" style={{ color: 'inherit' }}>18            Sidebar19          </a>20        </CDBSidebarHeader>2122        <CDBSidebarContent className="sidebar-content">23          <CDBSidebarMenu>24            <NavLink exact to="/" activeClassName="activeClicked">25              <CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>26            </NavLink>27            <NavLink exact to="/tables" activeClassName="activeClicked">28              <CDBSidebarMenuItem icon="table">Tables</CDBSidebarMenuItem>29            </NavLink>30            <NavLink exact to="/profile" activeClassName="activeClicked">31              <CDBSidebarMenuItem icon="user">Profile page</CDBSidebarMenuItem>32            </NavLink>33            <NavLink exact to="/analytics" activeClassName="activeClicked">34              <CDBSidebarMenuItem icon="chart-line">Analytics</CDBSidebarMenuItem>35            </NavLink>3637            <NavLink exact to="/hero404" target="_blank" activeClassName="activeClicked">38              <CDBSidebarMenuItem icon="exclamation-circle">404 page</CDBSidebarMenuItem>39            </NavLink>40          </CDBSidebarMenu>41        </CDBSidebarContent>4243        <CDBSidebarFooter style={{ textAlign: 'center' }}>44          <div45            style={{46              padding: '20px 5px',47            }}48          >49            Sidebar Footer50          </div>51        </CDBSidebarFooter>52      </CDBSidebar>53    </div>54  );55};5657export default Sidebar;

Source: devwares.com

Similar codes

0 vote325 views1 answer
UseBootstrapPrefixhttp://localhost:8000/static/js/bundle.js:15261:75
Javascript Bootstrap
0 vote389 views1 answer
Wp_enqueue_script bootstrap
Javascript Bootstrap
98 votes473 views2 answers
Add bootstrap to react,.........,,,,
Javascript Bootstrap
0 vote382 views1 answer
Bootstrap 4 form validator with jquery
Javascript Bootstrap
0 vote400 views1 answer
Bootstrap 3 dropdown don't close on click
Javascript Bootstrap
3 votes406 views2 answers
Col to right bootstrap
Javascript Bootstrap
3 votes413 views1 answer
React bootstrap card
Javascript Bootstrap
0 vote417 views1 answer
React bootstrap carousel not working
CSS Bootstrap
4 votes418 views1 answer
Bootstrap file select class
CSS Bootstrap
0 vote409 views1 answer
Reactbootstrap multiselect
Javascript Bootstrap