Navbar

Use in your code Learn more
bit import reactstrap.reactstrap/reactstrap/navbar

Navbar

Example

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default class Example extends React.Component {
constructor(props) {
  super(props);

  this.toggle = this.toggle.bind(this);
  this.state = {
     isOpen: false
   };
 }
toggle() {
  this.setState({
    isOpen: !this.state.isOpen
  });
}
render() {
  return (
    <div>
      <Navbar color="faded" light toggleable>
        <NavbarToggler right onClick={this.toggle} />
        <NavbarBrand href="/">reactstrap</NavbarBrand>
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}
}
NameTypeDescription
lightPropTypes.bool
inversePropTypes.bool
fullPropTypes.bool
fixedPropTypes.string
colorPropTypes.string
rolePropTypes.string
tag(PropTypes.func|PropTypes.string)

pass in custom element to use

toggleable(PropTypes.bool|PropTypes.string)

Test Summary

should render .navbar markupPass
should render default .navbar-toggleable classPass
should render size based .navbar-toggleable-* classesPass
should render custom tagPass
should render rolePass
should render childrenPass
should pass additional classNamesPass
should render prop based classesPass