react-navs

React Navs

Demo: https://trendmicro-frontend.github.io/react-navs

Installation

1. Install the latest version of react and react-navs:

npm install --save react @trendmicro/react-navs

2. At this point you can import @trendmicro/react-navs and its styles in your application as follows:

import {
    Nav,
    NavItem,
    NavDropdown, // optional
    MenuItem, // optional
    TabContent,
    TabPane
} from '@trendmicro/react-navs';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-navs/dist/react-navs.css';

// [Optional] Include react-dropdown.css when using NavDropdown
import '@trendmicro/react-dropdown/dist/react-dropdown.css'

Usage

Tabs

<Nav
    navStyle="tabs"
    activeKey={this.state.activeTab}
    onSelect={(eventKey, event) => {
        this.setState({ activeTab: eventKey });
    }}
    style={{
        borderBottomColor: 'transparent' // Make a transparent bottom border
    }}
>
    <NavItem eventKey={1}>Item 1</NavItem>
    <NavItem eventKey={2}>Item 2</NavItem>
    <NavItem eventKey={3}>Item 3</NavItem>
    <NavDropdown eventKey={4} title="NavItem 4">
        <MenuItem eventKey={4.1}>Action</MenuItem>
        <MenuItem eventKey={4.2}>Another action</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={4.3}>Separated link</MenuItem>
    </NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
    <TabPane eventKey={1}>Tab 1 content</TabPane>
    <TabPane eventKey={2}>Tab 2 content</TabPane>
    <TabPane eventKey={3}>Tab 3 content</TabPane>
    <TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
    <TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
    <TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>

Light Tabs

<Nav
    navStyle="light-tabs"
    activeKey={this.state.activeTab}
    onSelect={(eventKey, event) => {
        this.setState({ activeTab: eventKey });
    }}
>
    <NavItem eventKey={1}>Item 1</NavItem>
    <NavItem eventKey={2}>Item 2</NavItem>
    <NavItem eventKey={3}>Item 3</NavItem>
    <NavDropdown eventKey={4} title="NavItem 4">
        <MenuItem eventKey={4.1}>Action</MenuItem>
        <MenuItem eventKey={4.2}>Another action</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={4.3}>Separated link</MenuItem>
    </NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
    <TabPane eventKey={1}>Tab 1 content</TabPane>
    <TabPane eventKey={2}>Tab 2 content</TabPane>
    <TabPane eventKey={3}>Tab 3 content</TabPane>
    <TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
    <TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
    <TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>

Panel Tabs

<Nav
    navStyle="panel-tabs"
    activeKey={this.state.activeTab}
    onSelect={(eventKey, event) => {
        this.setState({ activeTab: eventKey });
    }}
>
    <NavItem eventKey={1}>Item 1</NavItem>
    <NavItem eventKey={2}>Item 2</NavItem>
    <NavItem eventKey={3}>Item 3</NavItem>
    <NavDropdown eventKey={4} title="NavItem 4">
        <MenuItem eventKey={4.1}>Action</MenuItem>
        <MenuItem eventKey={4.2}>Another action</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={4.3}>Separated link</MenuItem>
    </NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
    <TabPane eventKey={1}>Tab 1 content</TabPane>
    <TabPane eventKey={2}>Tab 2 content</TabPane>
    <TabPane eventKey={3}>Tab 3 content</TabPane>
    <TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
    <TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
    <TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>

API

Properties

Nav

Name	Type	Default	Description
activeHref	string		Marks the child NavItem with a matching href prop as active.
activeKey	any		Marks the NavItem with a matching eventKey as active. Has a higher precedence over activeHref.
navStyle	One of: 'tabs' 'light-tabs' 'panel-tabs' 'navbar'	'tabs'	Component visual or contextual style variants.
justified	boolean	false	Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.
stacked	boolean	false	Position NavItem vertically.
onSelect	function(eventKey, event)		A callback fired when a NavItem is selected.
role	string		ARIA role for the Nav.

NavItem

Name	Type	Default	Description
active	boolean	false	Highlight the nav item as active.
disabled	boolean	false	Whether or not component is disabled.
eventKey	any		Value passed to the onSelect handler, useful for identifying the selected nav item.
href	string
onClick	function(event)		Callback fired when the nav item is clicked.
onSelect	function(eventKey, event)		Callback fired when the nav item is selected.
role	string		ARIA role for the NavItem.

NavDropdown

Name	Type	Default	Description
componentClass	string	component
dropup	boolean	false	The menu will open above the dropdown button, instead of below it.
disabled	boolean	false	Whether or not component is disabled.
pullRight	boolean	false	Align the menu to the right side of the NavDropdown toggle.
open	boolean	false	Whether or not the dropdown is visible.
onClose	function(event)		A callback fired when the dropdown closes.
onToggle	function(boolean)		A callback fired when the dropdown wishes to change visibility. Called with the requested open value.
onSelect	function(eventKey, event)		A callback fired when a menu item is selected.
role	string		If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent	One of: 'click' 'mousedown'		Which event when fired outside the component will cause it to be closed.
active	boolean	false	Highlight the nav dropdown as active.
title	node
noCaret	boolean	false	Whether to prevent a caret from being rendered next to the title.

MenuItem

Name	Type	Default	Description
active	boolean	false	Highlight the menu item as active.
disabled	boolean	false	Disable the menu item, making it unselectable.
divider	boolean	false	Style the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKey	any		Value passed to the onSelect handler, useful for identifying the selected menu item.
header	boolean	false	Style the menu item as a header label, useful for describing a group of menu items.
href	string		HTML href attribute corresponding to a.href.
onClick	function(event)		Callback fired when the menu item is clicked.
onSelect	function(eventKey, event)		Callback fired when the menu item is selected.

TabContent

Name	Type	Default	Description
activeKey	any

TabPane

Name	Type	Default	Description
eventKey	any
lazy	boolean	false	If true, the TabPane will be unmounted when inactive.

License

MIT