react-sidemenu

Lightweight side menu component written in React.js. No jQuery, just CSS3.

Basic example


const items = [
  {divider: true, label: 'Main navigation', value: 'main-nav'},
  {label: 'item 1', value: 'item1', icon: 'fa-search',
  children: [
    {label: 'item 1.1', value: 'item1.1', icon: 'fa-snapchat',
    children: [
      {label: 'item 1.1.1', value: 'item1.1.1', icon: 'fa-anchor'},
      {label: 'item 1.1.2', value: 'item1.1.2', icon: 'fa-bar-chart'}]},
    {label: 'item 1.2', value: 'item1.2'}]},
  {label: 'item 2', value: 'item2', icon: 'fa-automobile',
  children: [
    {label: 'item 2.1', value: 'item2.1',
    children: [
      {label: 'item 2.1.1', value: 'item2.1.1'},
      {label: 'item 2.1.2', value: 'item2.1.2'}]},
    {label: 'item 2.2', value: 'item2.2'}]},
  {divider: true, label: 'Motors', value: 'motors-nav'},
  {label: 'item 3', value: 'item3', icon: 'fa-beer'}
];

class Menu extends Component {
  render() {
    return (<SideMenu items={items}/>);
  }
}
            


<SideMenu>
    <Item divider={true} label="Segment 1" value="segment1"/>
    <Item label="Item 1" icon="fa-search">
        <Item label="Item 1.1" value="item1.1" icon="fa-snapchat">
            <Item label="Item 1.1.1" value="item1.1.1" icon="fa-anchor"/>
            <Item label="Item 1.1.2" value="item1.1.2" icon="fa-bar-chart"/>
        </Item>
        <Item label="Item 1.2" value="item1.2"/>
    </Item>
    <Item label="Item 2" value="item2" icon="fa-automobile">
        <Item label="Item 2.1" value="item2.1.1">
            <Item label="Item 2.1.1" value="item2.1.1"/>
            <Item label="Item 2.1.2" value="item2.1.2"/>
        </Item>
        <Item label="Item 2.2" value="item2.2"/>
    </Item>
    <Item divider={true} label="Segment 2" value="segment2"/>
    <Item label="Item 3" value="item3" icon="fa-beer"/>
</SideMenu>

Active item exmple

 
<SideMenu items={items} activeItem="item1.1" />

No collapse example

 
<SideMenu items={items} collapse={false}/>

Custom rendering example

 
<SideMenu items={items} renderMenuItemContent={(item) => 
(<span><strong style={{color: "red"}}>{item.label}</strong></span>)} />

Custom click example

 
<SideMenu items={items} onMenuItemClick={(value) => alert("You just clicked me:" + value)} />

Custom theme example


.Side-menu-custom {
	.divider {
		background-color: #ABABAB;
		font-weight: 600;
	}

	.item {
		background-color: #CCC;

		&.item-level-1 .item-label {
			font-style: italic;
		}

		&.item-level-2 .item-label {
			font-size: 10px;
		}
	}
}

RTL example

<SideMenu rtl={true}/>