/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

3 votes391 views1 answer
React bootstrap card
Javascript Bootstrap
0 vote403 views1 answer
React-bootstrap problem-import new version
Javascript Bootstrap
0 vote356 views2 answers
./node_modules/bootstrap/dist/js/bootstrap.bundle.js
Javascript Bootstrap
-1 vote386 views2 answers
Bootstrap set active tab javascript
Javascript Bootstrap
0 vote405 views1 answer
Bootstrap dropdown in accordion problem
CSS Bootstrap
0 vote406 views1 answer
How to change tab color react bootstraps customixation
Javascript Bootstrap
13 votes373 views6 answers
Bootstrap Badges
CSS Bootstrap
1 vote390 views1 answer
Bootstrap js link not working
Javascript Bootstrap
0 vote370 views3 answers
Choose file bootstrap show filename
Javascript Bootstrap
41 votes356 views4 answers
Bootstrap npmjs
Javascript Bootstrap