Skip to content
JavaScript CSS
Branch: master
Clone or download
cheton Merge pull request #15 from wolfgangvc/patch-1
Mention that the examples use font awesome
Latest commit 8f52224 Jul 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist v0.4.5 Jun 12, 2018
docs v0.4.5 Jun 12, 2018
examples Update examples Jun 12, 2018
src Fixes an issue of setting isNavItemHighlighted in wrong state Jun 12, 2018
test Setup tests Dec 22, 2017
.babelrc first commit Dec 8, 2017
.eslintrc first commit Dec 8, 2017
.gitignore Exclude package-lock.json Jun 12, 2018
.npmignore first commit Dec 8, 2017
.stylintrc first commit Dec 8, 2017
.travis.yml Drop Node.js v4 and v5 support Dec 30, 2017
LICENSE first commit Dec 8, 2017
README.md Mention that the examples use font awesome Jan 7, 2019
package.json v0.4.5 Jun 12, 2018
setupTests.js eslint fixes Jan 17, 2018
webpack.config.js first commit Dec 8, 2017

README.md

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

You can’t perform that action at this time.