react-sider

Inspired by Ant Design Pro.

Lightweight Ant Design Pro like <Sider /> component integrated with Ant Design Menu.

Features

• Zero work on CSS.
• Minimum configuration and 100% data driven.
• Easy integration with any React app architectures. Only depends on react, react-router-dom, lodash & antd.
• Native nested menu and pathname support.
• Automatical menu openKeys & selectKeys match based on current page pathname.

Installation

yarn add react-sider react react-router-dom lodash antd

Preview

Usage

Sider

Property	Description	Type	Default
className	className of container	string	''
style	style of container	object	{ }
appName	name of application	string	''
appLogo	img src of application logo	string	''
appBaseUrl	href of sider header	string	'/'
width	sider container width	number	256
menuData	data of sider menu	arrayOf(MenuItem)	[ ]
pathname	current page pathname	string	'/'

MenuItem

Property	Description	Type	Default
name	menu item name in text	string	-
path	menu item path (see below example for details)	string	-
icon	menu item antd icon	string	-
children	sub menu items	arrayOf(MenuItem)	-

Example

import ReactSider from 'react-sider';
import 'react-sider/lib/index.css';
import logo from 'assets/logo.svg';
 
const menuData = [{
  // MenuItem name
  name: 'Dashboard',
  // MenuItem icon (antd icon)
  icon: 'dashboard',
  // MenuItem relative path
  path: 'dashboard',
  // SubMenu
  children: [{
    name: 'Analysis',
    path: 'analysis',
    children: [{
      name: 'Real-time',
      path: 'realtime',
    }, {
      name: 'Offline',
      path: 'offline',
    }],
  },
  {
    name: 'Monitor',
    path: 'monitor',
  },
  {
    name: 'Workplace',
    path: 'workplace',
  }],
}, {
  name: 'Marketing',
  icon: 'table',
  path: 'marketing',
}, {
  name: 'Settings',
  icon: 'setting',
  path: 'settings',
  children: [{
    name: 'Users Management',
    path: 'users',
  }],
}];
 
const Sider = () => (
  <ReactSider
    appName="React App Pro"
    appLogo={logo}
    menuData={menuData}
    // better to sync pathname with the router in your application
    pathname={this.props.location.pathname}
  />
)
 
export default Sider;

Notes

• react-sider will automatically format nested menu path with / based on menuData structure.
• Remember to config less-loader within your application building process since react-sider directly imports antd components styles.