Simple Side Menu
An simple Side menu component written only in React.js and CSS3.
Important: This component must be used with React Router V4.
Demo
Installation
We need to install react router dom firstly if is it not installed
npm install react-router-dom --save
npm install simple-side-menu --save
Usage
menu.js
title: "Dashboard" iconClassName: "fa fa-dashboard" icon: "" to: "/simple-side-menu" title: "Group" isCollapsible: true icon: "group" subItems: title: "New group" icon: "group_add" to: "/simple-side-menu/group/new" title: "New person" icon: "person_add" to: "/simple-side-menu/group/person/new" title: "Notifications" icon: "notifications" subItems: title: "Active" icon: "notifications_active" to: "/simple-side-menu/notifications/active" title: "Off" icon: "notifications_off" to: "/simple-side-menu/notifications/off" title: "Settings" isCollapsible: true iconClassName: "ion-gear-b" subItems: title: "Profile" icon: "person" to: "/simple-side-menu/settings/profile" title: "Applications" icon: <i className="material-icons">apps</i> to: "/simple-side-menu/settings/apps" title: "Sign out" icon: <i className="ion-log-out" /> to: "/simple-side-menu/sign-out" ;
Menu.js
;;; ; state = isOpen: true ; { this; }; { return <Router> <Container> <SideMenu isOpen=thisstateisOpen header=<Header logo="../public/logo.png" title="MENU_TITLE" /> items=MENU_ITEMS /> <div className="main"> <button onClick=thistoggleMenu>Toggle Me</button> <Route exact path="/" component=Dashboard /> <Route path="/group/new" component=AddGroup /> <Route path="/group/person/new" component=AddPerson /> <Route path="/notifications/active" component=NotificationsActive /> <Route path="/notifications/off" component=NotificationsOff /> <Route path="/settings/profile" component=Profile /> <Route path="/settings/apps" component=Application /> <Route path="/sign-out" component=LogOut /> </div> </Container> </Router> ; } const RoutePath = <h4>path</h4>; const Dashboard = <RoutePath path="/dashboard" />;const AddGroup = <RoutePath path="/group/new" />;const AddPerson = <RoutePath path="/group/person/new" />;const NotificationsActive = <RoutePath path="/notifications/active" />;const NotificationsOff = <RoutePath path="/notifications/off" />;const Profile = <RoutePath path="/settings/profile" />;const Application = <RoutePath path="/settings/apps" />;const LogOut = <RoutePath path="/sign-out" />; ;
API
<SideMenu />
Prop | Type | Default | Description |
---|---|---|---|
isOpen | bool | true | Specify if the side menu must be opened. |
items | array | Required | Property for the configuration of the component SideMenu. check the menu.js |
header | elem | null | Property for the side menu header. you can use Header component or any JSX element. |
isExpandable | bool | false | This property make posibile usage of the expanded mode. don't use it with toggle menu fonctionnality. |
defaultIconClassName | string | material-icons | Property for default icon className used for menu item and sub menu item, the Allowed values (material-icons, fa). |
<Header />
Prop | Type | Default | Description |
---|---|---|---|
to | string | / | Path of home page |
logo | string | null | The source path for the logo of application |
title | string | null | The title of the side menu |
headerClassName | string | nav-container__header | the Header className. |
logoClassName | string | nav-container__logo | The Logo className. |
titleClassName | string | nav-container__title | The title className. |
Styling
.nav-container { background-color: #db3d44;} .sub-menu { background-color: #ff6666;} .sub-menu__item--active,.sub-menu__item:hover,.sub-menu__item:visited,.menu-item--active,.menu-item > *:first-child:hover { background-color: #af3136;} .nav-container__header,.side-menu,.menu-item { box-shadow: 0 1px 0 #fff !important; -webkit-box-shadow: 0 1px 0 #fff !important; -moz-box-shadow: 0 1px 0 #fff !important;}