react-pro-sidebar

npmpackage.info

Gathering detailed insights and metrics for react-pro-sidebar

Other packages similar to react-pro-sidebar

react-modal-pro

3.5.1

Reusable react modal with dialog, sidebar and sheet.

sidebar-react-pro

1.1.2

Welcome to our modern and responsive sidebar solution! Designed to adapt seamlessly across all devices and screen sizes, our sidebar enhances user experience by providing easy navigation and accessibility in various contexts.

react-infinity-sidebar

1.0.18

A fully customizable and responsive sidebar component for React applications, built with TailwindCSS and Headless UI. Easily integrate dynamic navigation menus, dark mode, and various styling options. Designed for dashboards, admin panels, and modern web

@hepter/react-pro-sidebar

1.1.0-alpha.2

high level and customizable side navigation

Gathering detailed insights and metrics for 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	-

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

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

Other packages similar to react-pro-sidebar

Other packages similar to react-pro-sidebar

Installations

Developer Guide

No

CommonJS

Pull Requests

1

86

56

29

Issues

2

161

159

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Pro Sidebar

Old versions

Live Preview

Screenshot

Installation

yarn

npm

Usage

Using React Router

Customization

API

License

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10