Menu of the-components
$ npm install the-menu --save
Live Demo is hosted on GitHub Page
'use strict'
import React from 'react'
import { TheMenu, TheDropdownMenu, TheMenuStyle } from 'the-menu'
import { TheRouter } from 'the-router'
class ExampleComponent extends React.PureComponent {
render () {
const s = this
const ExampleMenu = ({grid = false}) => (
<TheMenu grid={grid}>
<TheMenu.Item icon='fa fa-support' text='Help' to='/help'/>
<TheMenu.Item icon='fa fa-info-circle' text='About' to='/about'/>
<TheMenu.Item icon='fa fa-sign-out' text='Logout' onClick={() => console.log('logout!')}/>
<TheMenu.Item icon='fa fa-sun-o' text='Foo'/>
<TheMenu.Item icon='fa fa-sun-o' text='Bar'/>
<TheMenu.Item icon='fa fa-sun-o' text='Baz'/>
</TheMenu>
)
return (
<div>
<TheRouter.Hash>
<TheMenuStyle/>
<h3>Default Menu</h3>
<div>
<ExampleMenu/>
</div>
<hr/>
<h3>Grid Menu</h3>
<div>
<ExampleMenu grid/>
</div>
<hr/>
<h3>Drop Down</h3>
<TheDropdownMenu label='Try me!'
>
<TheDropdownMenu.Item to='foo'>foo</TheDropdownMenu.Item>
<TheDropdownMenu.Item to='bar'>bar</TheDropdownMenu.Item>
<TheDropdownMenu.Item>baz</TheDropdownMenu.Item>
<TheDropdownMenu.Item to='quz'>quz</TheDropdownMenu.Item>
<TheDropdownMenu.Item>1</TheDropdownMenu.Item>
<TheDropdownMenu.Item>2</TheDropdownMenu.Item>
<TheDropdownMenu.Item>Long Long Long Long Long Text</TheDropdownMenu.Item>
</TheDropdownMenu>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</TheRouter.Hash>
</div>
)
}
}
export default ExampleComponent
Drop down menu
Props
Name | Type | Description | Default |
---|---|---|---|
eventsToClose |
arrayOf string | Event types to close for | ['hashchange'] |
label |
node | Label for toggle button | `` |
open |
bool | Open when mounted | false |
righted |
bool | Show on righthand | false |
role |
'menu' |
Menu of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
grid |
bool | Grid layout | false |
role |
'menu' |
Menu of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
active |
bool | Active or not | false |
icon |
string | Icon class name | null |
to |
string | Link to | null |
role |
'menuitem' |
Style for TheMenu
Props
Name | Type | Description | Default |
---|---|---|---|
options |
object | Style options | {} |
This software is released under the MIT License.