# 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


          const navbarInstance = (
            <Well>
              <Navbar fluid>
                <Navbar.Header>
                  <Navbar.Brand>
                    <a href="#">Brand</a>
                  </Navbar.Brand>
                </Navbar.Header>
                <Nav>
                  <NavItem active eventKey={1} href="#">Link</NavItem>
                  <NavItem eventKey={2} href="#">Link</NavItem>
                  <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                    <MenuItem eventKey={3.1} active>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>
              </Navbar>
            </Well>
          );

          
        

# Navbar Dropdown Hover Example

Toggle's NavDropdownHover on mouseover.


          const navbarInstance = (
            <Well>
              <Navbar fluid>
                <Navbar.Header>
                  <Navbar.Brand>
                    <a href="#">Brand</a>
                  </Navbar.Brand>
                </Navbar.Header>
                <Nav>
                  <NavItem active eventKey={1} href="#">Link</NavItem>
                  <NavItem eventKey={2} href="#">Link</NavItem>
                  <NavDropdownHover eventKey={3} title="Dropdown Hover" 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>
                  </NavDropdownHover>
                </Nav>
              </Navbar>
            </Well>
          );

          
        

# 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!

By setting the prop defaultExpanded the Navbar will start expanded by default. You can also finely control the collapsing behavior by using the expanded and onToggle props.


          const navbarInstance = (
            <Navbar fluid inverse>
              <Navbar.Header>
                <Navbar.Brand>
                  <a href="#">Brand</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.


          const navbarInstance = (
            <Navbar fluid>
              <Navbar.Header>
                <Navbar.Brand>
                  <a href="#">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>
                <Nav pullRight>
                  <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>
              </Navbar.Collapse>
            </Navbar>
          );

          
        

# Text and Non-nav links

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


          const navbarInstance = (
            <Navbar fluid>
              <Navbar.Header>
                <Navbar.Brand>
                  <a href="#">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

NameTypeDefaultDescription
bsClassstring'navbar'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: "default", "inverse"'default'Component visual or contextual style variants
componentClasselementType'nav'Set a custom element for this component.
expandedboolean
controlled by: onToggle, initial prop: defaultExpanded
Explicitly set the visiblity of the navbar body.
fixedBottombooleanfalseCreate a fixed navbar along the bottom of the screen, that scrolls with the page
fixedTopbooleanfalseCreate a fixed navbar along the top of the screen, that scrolls with the page
fluidbooleanfalseAllow the Navbar to fluidly adjust to the page or container width, instead of at the predefined screen breakpoints
inversebooleanfalseAn alternative dark visual style for the Navbar
onTogglefunction
controls navExpanded
A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new navExpanded boolean value.
staticTopbooleanfalseCreate a full-width navbar that scrolls away with the page

Navbar.Toggle

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