/react-sidenav

React SideNav component

Primary LanguageJavaScriptMIT LicenseMIT

react-sidenav build status Coverage Status

NPM

React SideNav

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

Installation

  1. Install the latest version of react and react-sidenav:
npm install --save react @trendmicro/react-sidenav
  1. At this point you can import @trendmicro/react-sidenav and its styles in your application as follows:
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';

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

Usage

These examples make use of font-awesome.

<SideNav
    onSelect={(selected) => {
        // Add your code here
    }}
>
    <SideNav.Toggle />
    <SideNav.Nav defaultSelected="home">
        <NavItem eventKey="home">
            <NavIcon>
                <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
            </NavIcon>
            <NavText>
                Home
            </NavText>
        </NavItem>
        <NavItem eventKey="charts">
            <NavIcon>
                <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
            </NavIcon>
            <NavText>
                Charts
            </NavText>
            <NavItem eventKey="charts/linechart">
                <NavText>
                    Line Chart
                </NavText>
            </NavItem>
            <NavItem eventKey="charts/barchart">
                <NavText>
                    Bar Chart
                </NavText>
            </NavItem>
        </NavItem>
    </SideNav.Nav>
</SideNav>

React Router v4 with React v16

<Router>
    <Route render={({ location, history }) => (
        <React.Fragment>
            <SideNav
                onSelect={(selected) => {
                    const to = '/' + selected;
                    if (location.pathname !== to) {
                        history.push(to);
                    }
                }}
            >
                <SideNav.Toggle />
                <SideNav.Nav defaultSelected="home">
                    <NavItem eventKey="home">
                        <NavIcon>
                            <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                        </NavIcon>
                        <NavText>
                            Home
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="devices">
                        <NavIcon>
                            <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                        </NavIcon>
                        <NavText>
                            Devices
                        </NavText>
                    </NavItem>
                </SideNav.Nav>
            </SideNav>
            <main>
                <Route path="/" exact component={props => <RootComponent />} />
                <Route path="/home" component={props => <Home />} />
                <Route path="/devices" component={props => <Devices />} />
            </main>
        </React.Fragment>
    )}
    />
</Router>

Close the side navigation menu when clicking outside

You can find a click-outside React component (https://github.com/tj/react-click-outside/blob/master/index.js) and do something below:

<ClickOutside
    onClickOutside={() => {
        this.setState({ expanded: false });
    }}
>
    <SideNav
        expanded={this.state.expanded}
        onToggle={(expanded) => {
            this.setState({ expanded });
        }}
    >
        <SideNav.Toggle />
        <SideNav.Nav defaultSelected="home">
            <NavItem eventKey="home">
                <NavIcon>
                    <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    Home
                </NavText>
            </NavItem>
        </SideNav.Nav>
    </SideNav>
</ClickOutside>

API

Properties

SideNav

Name Type Default Description
componentClass element 'nav' A custom element for this component.
disabled boolean Whether the navigation toggle is disabled.
expanded boolean Whether the side navigation is expanded or collapsed.
onToggle function(boolean) Callback fired when toggling the side navigation between expanded and collapsed state.
onSelect function(eventKey, event) Callback fired when a navigation item is selected.

Toggle

Name Type Default Description
componentClass element 'button' A custom element for this component.
disabled boolean false Whether the navigation toggle is disabled.
expanded boolean false Whether the side navigation is expanded or collapsed.

Nav

Name Type Default Description
componentClass element 'div' A custom element for this component.
onSelect function(eventKey, event) Callback fired when a navigation item is selected.
selected any The selected navigation item.
defaultSelected any The initially selected navigation item.
expanded boolean false Whether the side navigation is expanded or collapsed.

NavItem

Name Type Default Description
componentClass element 'div' A custom element for this component.
active boolean false Highlight the navigation item as active.
disabled boolean false Disable the navigation item, making it unselectable.
expanded boolean false Whether the navigation item is expanded or collapsed.
eventKey any (required) Value passed to the onSelect handler, useful for identifying the selected navigation item.
onClick function(event) Callback fired when the navigation item is clicked.
onSelect function(eventKey, event) Callback fired when a navigation item is selected.
navitemClassName
navitemStyle
subnavClassName
subnavStyle

NavIcon

Name Type Default Description
children any

NavText

Name Type Default Description
children any

License

MIT