# Navs Nav, NavItem

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" className='nav-orange75' 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>
);


# Dropdown

Add dropdowns using the NavDropdown component.


function handleSelect(selectedKey) {
  alert('selected ' + selectedKey);
}

const navInstance = (
  <Nav bsStyle="pills" className='nav-orange75' 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>
    <NavDropdown eventKey={4} title="Dropdown" id="nav-dropdown" bsStyle="orange75">
      <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>
);


# Dropdown Hover

Add dropdowns using the NavDropdownHover component.


function handleSelect(selectedKey) {
  alert('selected ' + selectedKey);
}

const navInstance = (
  <Nav bsStyle="pills" className='nav-orange75' 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>
    <NavDropdownHover eventKey={4} title="Dropdown" id="nav-dropdown" bsStyle="orange75">
      <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>
    </NavDropdownHover>
  </Nav>
);


# Stacked

They can also be stacked vertically.


        function handleSelect(selectedKey) {
          alert('selected ' + selectedKey);
        }

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

        
        

# Justified

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


        const NavJustified = React.createClass({
          handleSelect(selectedKey) {
            alert('selected ' + selectedKey);
          },

          render() {
            return (
              <div>
                <Nav bsStyle="tabs" className='nav-darkcyan' justified activeKey={1} onSelect={this.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>
                <br />
                <Nav bsStyle="pills" className='nav-darkcyan' justified activeKey={1} onSelect={this.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>
              </div>
            );
          }
        });

        
        

# Props

Nav

NameTypeDefaultDescription
activeHrefstringMarks the child NavItem with a matching href prop as active.
activeKeyanyMarks the NavItem with a matching eventKey as active. Has a higher precedence over activeHref.
bsClassstring'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.
bsStyleone of: "tabs", "pills"Component visual or contextual style variants
classNamestringCSS classes for the wrapper nav element. Typically used for adding color scheme via nav-${color}
idstring | numberHTML id for the wrapper nav element
justifiedallfalse
navbarbooleanApply styling an alignment for use in a Navbar. This prop will be set automatically when the Nav is used inside a Navbar.
onSelectfunction
A callback fired when a NavItem is selected.
function (
	Any eventKey,
	SyntheticEvent event?
)
pullLeftbooleanfalseFloat the Nav to the left. When navbar is true the appropriate contextual classes are added as well.
pullRightbooleanfalseFloat the Nav to the right. When navbar is true the appropriate contextual classes are added as well.
rolestring

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

stackedbooleanfalseNavItems are be positioned vertically.

NavItem

NameTypeDefaultDescription
activebooleanfalse
disabledbooleanfalse
dividerbooleanfalse
eventKeyany
hrefstring
onClickfunction
onSelectfunction
rolestring