Components

Navs come in two styles, pills and tabs. Disable a tab by adding disabled.

function handleSelect(selectedKey) {
  alert(`selected ${selectedKey}`);
}

const navInstance = (
  <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">
      NavItem 1 content
    </NavItem>
    <NavItem eventKey={2} title="Item">
      NavItem 2 content
    </NavItem>
    <NavItem eventKey={3} disabled>
      NavItem 3 content
    </NavItem>
  </Nav>
);

render(navInstance);

#Dropdown

Add dropdowns using the NavDropdown component.

class NavDropdownExample extends React.Component {
  handleSelect(eventKey, event) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  }

  render() {
    return (
      <Nav bsStyle="tabs" activeKey="1" onSelect={k => this.handleSelect(k)}>
        <NavItem eventKey="1" href="/home">
          NavItem 1 content
        </NavItem>
        <NavItem eventKey="2" title="Item">
          NavItem 2 content
        </NavItem>
        <NavItem eventKey="3" disabled>
          NavItem 3 content
        </NavItem>
        <NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
          <MenuItem eventKey="4.1">Action</MenuItem>
          <MenuItem eventKey="4.2">Another action</MenuItem>
          <MenuItem eventKey="4.3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4.4">Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    );
  }
}

render(<NavDropdownExample />);

#Stacked

They can also be stacked vertically.

function handleSelect(selectedKey) {
  alert(`selected ${selectedKey}`);
}

const navInstance = (
  <Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">
      NavItem 1 content
    </NavItem>
    <NavItem eventKey={2} title="Item">
      NavItem 2 content
    </NavItem>
    <NavItem eventKey={3} disabled>
      NavItem 3 content
    </NavItem>
  </Nav>
);

render(navInstance);

#Justified

They can be justified to take the full width of their parent.

class NavJustified extends React.Component {
  handleSelect(selectedKey) {
    alert(`selected ${selectedKey}`);
  }

  render() {
    return (
      <div>
        <Nav
          bsStyle="tabs"
          justified
          activeKey={1}
          onSelect={key => this.handleSelect(key)}
        >
          <NavItem eventKey={1} href="/home">
            NavItem 1 content
          </NavItem>
          <NavItem eventKey={2} title="Item">
            NavItem 2 content
          </NavItem>
          <NavItem eventKey={3} disabled>
            NavItem 3 content
          </NavItem>
        </Nav>
        <br />
        <Nav
          bsStyle="pills"
          justified
          activeKey={1}
          onSelect={key => this.handleSelect(key)}
        >
          <NavItem eventKey={1} href="/home">
            NavItem 1 content
          </NavItem>
          <NavItem eventKey={2} title="Item">
            NavItem 2 content
          </NavItem>
          <NavItem eventKey={3} disabled>
            NavItem 3 content
          </NavItem>
        </Nav>
      </div>
    );
  }
}

render(<NavJustified />);

#Props

#Nav [source]

Name	Type	Default	Description
activeKey	any		Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.
activeHref	string		Marks the child NavItem with a matching `href` prop as active.
stacked	boolean	false	NavItems are be positioned vertically.
justified	all( PropTypes.bool, ({ justified, navbar }) => justified && navbar ? Error('justified navbar `Nav`s are not supported') : null )	false
onSelect	function		A callback fired when a NavItem is selected. `function ( Any eventKey, SyntheticEvent event? )`
role	string		ARIA role for the Nav, in the context of a TabContainer, the default will be set to "tablist", but can be overridden by the Nav when set explicitly. When the role is set to "tablist" NavItem focus is managed according to the ARIA authoring practices for tabs: https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
navbar	boolean		Apply styling an alignment for use in a Navbar. This prop will be set automatically when the Nav is used inside a Navbar.
pullRight	boolean	false	Float the Nav to the right. When `navbar` is `true` the appropriate contextual classes are added as well.
pullLeft	boolean	false	Float the Nav to the left. When `navbar` is `true` the appropriate contextual classes are added as well.
bsStyle	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component visual or contextual style variants.
bsClass	string	'nav'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#NavItem [source]

Name	Type	Default	Description
active	boolean	false
disabled	boolean	false
role	string
href	string
onClick	function
onSelect	function
eventKey	any		A unique identifier for the Component, the `eventKey` makes it distinguishable from others in a set. Similar to React's `key` prop, in that it only needs to be unique amoungst the Components siblings, not globally.