React Pro Sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

Old versions

• v0.x

Live Preview

• Demo

• Storybook

Screenshot

Installation

yarn

1yarn add react-pro-sidebar

npm

1npm install react-pro-sidebar

Usage

1import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
2
3<Sidebar>
4  <Menu>
5    <SubMenu label="Charts">
6      <MenuItem> Pie charts </MenuItem>
7      <MenuItem> Line charts </MenuItem>
8    </SubMenu>
9    <MenuItem> Documentation </MenuItem>
10    <MenuItem> Calendar </MenuItem>
11  </Menu>
12</Sidebar>;

Using React Router

You can make use of the component prop to integrate React Router link

Example Usage

1import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
2import { Link } from 'react-router-dom';
3
4<Sidebar>
5  <Menu
6    menuItemStyles={{
7      button: {
8        // the active class will be added automatically by react router
9        // so we can use it to style the active menu item
10        [`&.active`]: {
11          backgroundColor: '#13395e',
12          color: '#b6c8d9',
13        },
14      },
15    }}
16  >
17    <MenuItem component={<Link to="/documentation" />}> Documentation</MenuItem>
18    <MenuItem component={<Link to="/calendar" />}> Calendar</MenuItem>
19    <MenuItem component={<Link to="/e-commerce" />}> E-commerce</MenuItem>
20  </Menu>
21</Sidebar>;

Customization

We provide for each component rootStyles prop that can be used to customize the styles

its recommended using utility classes (sidebarClasses, menuClasses) for selecting target child nodes

Example usage

1<Sidebar
2  rootStyles={{
3    [`.${sidebarClasses.container}`]: {
4      backgroundColor: 'red',
5    },
6  }}
7>
8  // ...
9</Sidebar>

For Menu component, in addition to rootStyles you can also use menuItemStyles prop for customizing all MenuItem & SubMenu components and their children

Type definition

1interface MenuItemStyles {
2  root?: ElementStyles;
3  button?: ElementStyles;
4  label?: ElementStyles;
5  prefix?: ElementStyles;
6  suffix?: ElementStyles;
7  icon?: ElementStyles;
8  subMenuContent?: ElementStyles;
9  SubMenuExpandIcon?: ElementStyles;
10}
11
12type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);

Example usage

1<Sidebar>
2  <Menu
3    menuItemStyles={{
4      button: ({ level, active, disabled }) => {
5        // only apply styles on first level elements of the tree
6        if (level === 0)
7          return {
8            color: disabled ? '#f5d9ff' : '#d359ff',
9            backgroundColor: active ? '#eecef9' : undefined,
10          };
11      },
12    }}
13  >
14    //...
15  </Menu>
16</Sidebar>

API

Component	Prop	Type	Description	Default
Sidebar	defaultCollapsed	boolean	Initial collapsed status	false
	collapsed	boolean	Sidebar collapsed state	false
	toggled	boolean	Sidebar toggled state	false
	width	number | string	Width of the sidebar	270px
	collapsedWidth	number | string	Width of the sidebar on collapsed state	80px
	backgroundColor	string	Set background color for sidebar	rgb(249, 249, 249, 0.7)
	image	string	Url of the image to use in the sidebar background, need to apply transparency to background color	-
	breakPoint	xs | sm | md | lg | xl | xxl | all	Set when the sidebar should trigger responsiveness behavior	-
	customBreakPoint	string	Set custom breakpoint value, this will override breakPoint prop	-
	transitionDuration	number	Duration for the transition in milliseconds to be used in collapse and toggle behavior	300
	rtl	boolean	RTL direction	false
	rootStyles	CSSObject	Apply styles to sidebar element	-
	onBackdropClick	() => void	Callback function to be called when backdrop is clicked	-
Menu	closeOnClick	boolean	If true and sidebar is in collapsed state, submenu popper will automatically close on MenuItem click	false
	menuItemStyles	MenuItemStyles	Apply styles to MenuItem and SubMenu components and their children	-
	renderExpandIcon	(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode	Render method for customizing submenu expand icon	-
	transitionDuration	number	Transition duration in milliseconds to use when sliding submenu content	300
	rootStyles	CSSObject	Apply styles from Menu root element	-
MenuItem	icon	ReactNode	Icon for the menu item	-
	active	boolean	If true, the component is active	false
	disabled	boolean	If true, the component is disabled	-
	prefix	ReactNode	Add a prefix to the menuItem	-
	suffix	ReactNode	Add a suffix to the menuItem	-
	component	string | ReactElement	A component used for menu button node, can be string (ex: 'div') or a component	-
	rootStyles	CSSObject	Apply styles to MenuItem element	-
SubMenu	label	string | ReactNode	Label for the submenu	-
	icon	ReactNode	Icon for submenu	-
	defaultOpen	boolean	Set if the submenu is open by default	false
	open	boolean	Set open value if you want to control the state	-
	active	boolean	If true, the component is active	false
	disabled	boolean	If true, the component is disabled	-
	prefix	ReactNode	Add a prefix to the submenu	-
	suffix	ReactNode	Add a suffix to the submenu	-
	onOpenChange	(open: boolean) => void	Callback function called when submenu state changes	-
	component	string | React.ReactElement	A component used for menu button node, can be string (ex: 'div') or a component	-
	rootStyles	CSSObject	Apply styles to SubMenu element	-

License

Changelog

1.1.0-alpha.2

• Fixed the issue of collapse/expand according to change by managing internal with open state hook

MIT © Mohamed Azouaoui