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]

NameTypeDefaultDescription
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]

NameTypeDefaultDescription
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.