Customizable and responsive react sidebar library with dropdown menus

Jul 21, 2020
Customizable and responsive react sidebar library with dropdown menus

React Pro Sidebar

Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus.


View Demo View Github



yarn add react-pro-sidebar


npm install react-pro-sidebar


import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'; import 'react-pro-sidebar/dist/css/styles.css'; <ProSidebar> <Menu iconShape="square"> <MenuItem icon={<FaGem />}>Dashboard</MenuItem> <SubMenu title="Components" icon={<FaHeart />}> <MenuItem>Component 1</MenuItem> <MenuItem>Component 2</MenuItem> </SubMenu> </Menu> </ProSidebar>;

If you are using sass then you can import the styles.scss directly into your scss file

@import '~react-pro-sidebar/dist/scss/styles.scss';

Sidebar Layout

You can take advantage of the sidebar layout components to organize the content of your sidebar

import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar'; <ProSidebar> <SidebarHeader> {/** * You can add a header for the sidebar ex: logo */} </SidebarHeader> <SidebarContent> {/** * You can add the content of the sidebar ex: menu, profile details, ... */} </SidebarContent> <SidebarFooter> {/** * You can add a footer for the sidebar ex: copyright */} </SidebarFooter> </ProSidebar>;

Custom Styling

There are sets of sass variables available which you can override to define your own styles

You need to include your override variables before importing the scss file

Your custom.scss file should look something like this

// Your variable overrides $sidebar-bg-color: #1d1d1d; @import '~react-pro-sidebar/dist/scss/styles.scss';

Available scss variables

$sidebar-bg-color: #1d1d1d !default; $sidebar-color: #adadad !default; $sidebar-width: 270px !default; $sidebar-collapsed-width: 80px !default; $highlight-color: #d8d8d8 !default; $submenu-bg-color: #2b2b2b !default; $submenu-bg-color-collapsed: #2b2b2b !default; $icon-bg-color: #2b2b2b !default; $icon-size: 35px !default; $breakpoint-xs: 480px !default; $breakpoint-sm: 576px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 992px !default; $breakpoint-xl: 1200px !default;

Using nested sub-menus

You can have as many nested menu-items and sub-menus as you like, and the syntax is very simple

<Menu iconShape="square"> <SubMenu title="Components" icon={<FaGem />}> <MenuItem>Component 1</MenuItem> <SubMenu title="Sub Component 1" icon={<FaHeart />}> {/* you can have more nested submenus ... */} </SubMenu> </SubMenu> </Menu>

Using React Router Dom

Here is an example on how to use react router dom in the menu item

import { Link } from 'react-router-dom'; <MenuItem icon={<FaGem />}> Dashboard <Link to="/" /> </MenuItem>;


ProSidebarcollapsedbooleancollapsed status of the sidebarfalse
rtlbooleanRTL directionfalse
toggledstringToggle status of the sidebar when break point is enabledfalse
onToggle(value:boolean)=>{}Callback function called when toggled status changes, happens when overlay is clicked-
breakPointxs | sm | md | lg | xlSet break point to specify when the sidebar should be responsive-
widthnumber | stringWidth of the sidebar270px
imagestringUrl of the image to use in the sidebar background-
MenuiconShape'square' | 'round' | 'circle'Shape of the menu icons-
popperArrowbooleanif true, an arrow will be displayed when sidebar collapsed to point to sub-menu wrapperfalse
MenuItemiconReactNodeIcon for the menu item-
activebooleanSet active menu itemsfalse
prefixReactNodeAdd a prefix to the menuItem-
suffixReactNodeAdd a suffix to the menuItem-
SubMenutitlestring | ReactNodeTitle for the submenu-
iconReactNodeIcon for submenu-
defaultOpenbooleanSet if the submenu is open by defaultfalse
openbooleanSet open value if you want to control the state-
prefixReactNodeAdd a prefix to the submenu-
suffixReactNodeAdd a suffix to the submenu-

## GitHub

Related React stuff