react-sidenav

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

2. 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