React Multilevel Sidebar
react-multilevel-sidebar is a sidebar component for web and responsive mobile layout it gives you nested level menu where you can categorize your items.
npm install --save react-multilevel-sidebar
Here's how to use it:
import MultilevelSidebar from "react-multilevel-sidebar"; import "react-multilevel-sidebar/src/Sidebar.css";
||Shows or hide the sidebar.|
||function to change the current state of sidebar, to show or to hide.|
||having all the options of the sidebar (see details)|
||main header of the sidebar, it could be some string text, or a custom react component.|
||if true the sidebar will open from the level where it was closed, else sidebar will always open from the first level.|
||css class for custom styles will be applied on sidebar main wrapper, you can then override the styles for nested elements using selectors.|
||css class for header if not using a custom header by composition. you can style the default one.|
||this function will be triggered whenever the sidebar will be closed|
||this function will be triggered whenever you'll click on any item in the sidebar. It will recieve options from that item in the first parameter|
||this function will be triggered every time the back button will be pressed from a nested level.|
Options is the main prop for the sidebar here you can define/structure how your sidebar will looks like. (It is better to create a seperate file for your options and then import it where ever you're using this component and then pass it there as a prop).
It will be an array of objects, the first level object will be specifying the title and heading for a specific category they're optional so if you don't want to break into the categories you can skip them and only use the
content will be an array of objects which will have all the items in that category each object must contain an
id property its value can be any random number but you must pass it. if any of your content contains another level you can just pass a children array and its structure will be same as the first level, define title etc and then an content array.
The properties inside the object:
: string (optional) title
shows the title of a specific category.
: element (optional) titleIcon
icon for the title.
: boolean (optional) hideBorder
each category is seprated by a separator you can remove it by passing true to this option.
: array (required) content
An array of objects containing the items in that category.
The properties inside content are below:
: number (required) id
it can be any number must be unique for each item and it is required for each items.
: string (required) name
name of the item
: string:route (optional) to
if you want to navigate to a route on clicking the item you can pass the route in the option
:boolean (optional) disabled
If true that item will be disabled, and user won't be able to click it
: element (optional) icon
icon for the item.
: array (optional) children
if you want another level for the sidebar you can pass the children to a specific item, the same above structure will be repeated for each children.
: any (optional) your options
whenever you'll click an item
onItemClick callback will be triggered and it will have the options for that item in its first parameter, you may want something in those options for your custom logic, so you can simply pass them here in the options so you can do something with them when you click it.
you can see the nested options example here
This source code is licensed under the MIT license.