This package has been deprecated

Author message:

move to @the-/ui-menu ( https://github.com/the-labo/the/tree/master/packages/ui-menu#readme )

the-menu

Menu of the-components

Installation

$ npm install the-menu --save

Usage

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
 

Components

TheDropDownMenu

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'

TheMenu

Menu of the-components

Props

Name	Type	Description	Default
grid	bool	Grid layout	false
role			'menu'

TheMenuItem

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'

TheMenuStyle

Style for TheMenu

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo