react-pure-menu provides wrapper for Pure menu elements making it easy to build Pure menus using React.
var Menu = require('react-pure-menu');
<!-- accepts horizontal={true}, defaults to false (vertical) -->
<!-- accepts scrollable={true}, defaults to false -->
<Menu>
<Menu.Heading>Menu Heading</Menu.Heading>
<Menu.List>
<Menu.Item selected={true}>
<Menu.Link>Dashboard</Menu.Link>
</Menu.Item>
<Menu.Item disabled={true}>
<Menu.Link>Registers</Menu.Link>
</Menu.Item>
<Menu.Item>
<Menu.Link>Contracts</Menu.Link>
</Menu.Item>
</Menu.List>
</Menu>
You can attach attributes to each component as usual. className won't override default Pure class so you can customize that.
To make a horizontal menu scrollable, besides setting the flag you'll need to restrict maximum height like this (based on Pure documentation):
.restricted-menu {
height: 160px;
width: 150px;
border: 1px solid gray;
border-radius: 4px;
}
- Linting - npm run lint
- Testing - npm test - This will lint too.
- Developing - npm start - This will run a server at localhost:3000 and use Hot Module Reloading.
- Demo deployment - npm run gh-pages and npm run deploy-gh-pages - Demo will contain README.md by default and comes with simple styling based on Pure.
react-pure-menu is available under MIT. See LICENSE for more details.