react-nav-tabs
v0.0.4
Published
Generic, flexible tabbed based navigation with optional react-router support
Downloads
2
Maintainers
Readme
react-nav-tabs
Description
A set of components making tabbed navigation easier. Optionally supports react-router
if you'd like the tab panes to show routes instead of predefined components.
The main goal of this project is to provide flexible class names, elements, and react-router in a concise way.
Example Usage
import {
NavTabs,
NavTabList,
NavTab,
NavTabPaneList,
NavTabPane
} from "react-nav-tabs";
<NavTabs active="profile" element="div" className="app">
<NavTabList element="nav" className="app__navigation">
<NavTab element="div" className="app__navigation-home" key="home">
<h1>Home</h1>
</NavTab>
<NavTab element="div" className="app__navigation-profile" key="profile">
<h1>Profile</h1>
</NavTab>
</NavTabList>
<NavTabPaneList element="main" className="app__body">
<NavTabPane key="home" element="div" className="app__body__home">
<HomeComponent />
</NavTabPane>
<NavTabPane key="profile" element="div" className="app__body__profile">
<ProfileComponent />
</NavTabPane>
</NavTabPaneList>
</NavTabs>
Please view the docs for more information on the API.
License
MIT