essence-navigation
v1.0.8
Published
Essence Navigation - Navigation component
Downloads
10
Keywords
Readme
Essence Navigation - Navigation component
Options:
- visible: boolean value with
true
for visible andfalse
for hidden - onOpen: callback function when Navigation component has visible toggled to
true
- onClose: callback function when Navigation component has visible toggled to
false
- dismissible:
true
orfalse
to toggle the visible prop when clicked on the overlay
How to use
import Navigation from 'essence-navigation';
<Navigation visible={true} dismissible={false} onOpen={this.onOpenCallback.bind(this)} onClose={this.onCloseCallback.bind(this)}>
<Block classes={'e-navigation-wrapper'} id={'navigationMenu'}>
<Block type={'header'} classes={'e-nav-header'}>
<Text>Navigation header</Text>
</Block>
<List type={'navigation'}>
<ListItem>
<Text type={'a'} href={'#item 1'}>
List item 1
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#item 2'}>
List item 2
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#item 3'}>
List item 3
</Text>
</ListItem>
</List>
<Block type={'footer'} classes={'e-nav-footer'}>
Navigation footer
</Block>
</Block>
</Navigation>