Nav Properties
tabs: PropTypes.bool,
pills: PropTypes.bool,
card: PropTypes.bool,
justified: PropTypes.bool,
fill: PropTypes.bool,
vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
horizontal: PropTypes.string,
navbar: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
// pass in custom element to use
}
NavItem Properties
NavLink Properties
NavLink.propTypes = {
disabled: PropTypes.bool,
active: PropTypes.bool,
// pass in custom element to use
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
// ref will only get you a reference to the NavLink component, use innerRef to get a reference to the DOM element (for things like focus management).
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
import React from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
export default class Example extends React.Component {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<div>
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
);
}