Components

#Navbars Navbar

Navbars are responsive meta components that serve as navigation headers for your application or site.

They also support all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it.

For example navbar-fixed-top becomes the property fixedTop. The different properties are fixedTop, fixedBottom, staticTop, inverse, and fluid.

You can also align elements to the right by specifying the pullRight prop on the Nav, and other sub-components.

#Navbar Basic Example

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#home">React-Bootstrap</a>
    </Navbar.Brand>
  </Navbar.Header>
  <Nav>
    <NavItem eventKey={1} href="#">
      Link
    </NavItem>
    <NavItem eventKey={2} href="#">
      Link
    </NavItem>
    <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
      <MenuItem eventKey={3.1}>Action</MenuItem>
      <MenuItem eventKey={3.2}>Another action</MenuItem>
      <MenuItem eventKey={3.3}>Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey={3.4}>Separated link</MenuItem>
    </NavDropdown>
  </Nav>
</Navbar>;

Additional Import Options

The Navbar Header, Toggle, Brand, and Collapse components are available as static properties on the <Navbar/> component but you can also import them directly from the /lib directory like: require("react-bootstrap/lib/NavbarHeader").

#Responsive Navbars

To have a mobile friendly Navbar, Add a Navbar.Toggle to your Header and wrap your Navs in a Navbar.Collapse component. The Navbar will automatically wire the toggle and collapse together!

Set the defaultExpanded prop to make the Navbar start expanded. Set collapseOnSelect to make the Navbar collapse automatically when the user selects an item. You can also finely control the collapsing behavior by using the expanded and onToggle props.

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#brand">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Link
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link
      </NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.3}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#">
        Link Right
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link Right
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>;

#Forms

Use the Navbar.Form convenience component to apply proper margins and alignment to form components.

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#home">Brand</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Navbar.Form pullLeft>
      <FormGroup>
        <FormControl type="text" placeholder="Search" />
      </FormGroup>{' '}
      <Button type="submit">Submit</Button>
    </Navbar.Form>
  </Navbar.Collapse>
</Navbar>;

#Text and Non-nav links

Loose text and links can be wraped in the convenience components: Navbar.Link and Navbar.Text

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#home">Brand</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Navbar.Text>
      Signed in as: <Navbar.Link href="#">Mark Otto</Navbar.Link>
    </Navbar.Text>
    <Navbar.Text pullRight>Have a great day!</Navbar.Text>
  </Navbar.Collapse>
</Navbar>;

#Props

#Navbar[source]

NameTypeDefaultDescription
fixedTop
boolean
false

Create a fixed navbar along the top of the screen, that scrolls with the page

fixedBottom
boolean
false

Create a fixed navbar along the bottom of the screen, that scrolls with the page

staticTop
boolean
false

Create a full-width navbar that scrolls away with the page

inverse
boolean
false

An alternative dark visual style for the Navbar

fluid
boolean
false

Allow the Navbar to fluidly adjust to the page or container width, instead of at the predefined screen breakpoints

componentClass
elementType
'nav'

Set a custom element for this component.

onToggle
function
 controls expanded

A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new expanded boolean value.

onSelect
function

A callback fired when a descendant of a child <Nav> is selected. Should be used to execute complex closing or other miscellaneous actions desired after selecting a descendant of <Nav>. Does nothing if no <Nav> or <Nav> descendants exist. The callback is called with an eventKey, which is a prop from the selected <Nav> descendant, and an event.

function (
 Any eventKey,
 SyntheticEvent event?
)

For basic closing behavior after all <Nav> descendant onSelect events in mobile viewports, try using collapseOnSelect.

Note: If you are manually closing the navbar using this OnSelect prop, ensure that you are setting expanded to false and not toggling between true and false.

collapseOnSelect
boolean
false

Sets expanded to false after the onSelect event of a descendant of a child <Nav>. Does nothing if no <Nav> or <Nav> descendants exist.

The onSelect callback should be used instead for more complex operations that need to be executed after the select event of <Nav> descendants.

expanded
boolean
 controlled by: onToggle, initial prop: defaultExpanded

Explicitly set the visiblity of the navbar body

role
string
bsStyle
one of: "default", "inverse"
'default'

Component visual or contextual style variants.

#Navbar.Toggle[source]

NameTypeDefaultDescription
onClick
function
children
node

The toggle content, if left empty it will render the default toggle (seen above).