Bootstrap: NavBar

Basic Example

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

<NavBar>
  <Container fluid>
    <NavHeader>
      <NavToggle container={this} nav='navcontainer1'>Toggle navigation</NavToggle>
      <NavBrand>Brand</NavBrand>
    </NavHeader>
    <NavContent ref='navcontainer1' collapse>
      <Nav>
        <NavItem active href='#'>Link 1</NavItem>
        <NavItem href='#'>CSS</NavItem>
        <NavItem dropdown>
          <DropdownButton nav container={this} menu='navmenu1'>
            <span>Dropdown </span><Caret/>
          </DropdownButton>
          <Menu ref='navmenu1'>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </NavItem>
      </Nav>
      <Nav right>
        <NavItem href='#'>Link 3</NavItem>
        <NavItem dropdown>
          <DropdownButton nav container={this} menu='navmenu2'>
            <span>Dropdown </span><Caret/>
          </DropdownButton>
          <Menu ref='navmenu2'>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </NavItem>
      </Nav>
    </NavContent>
  </Container>
</NavBar>

Forms

Place form content within NavForm for proper vertical alignment and collapsed behavior in narrow viewports.

<NavBar>
  <Container fluid>
    <NavHeader>
      <NavToggle container={this} nav='navcontainer'>Toggle navigation</NavToggle>
      <NavBrand>Brand</NavBrand>
    </NavHeader>
    <NavContent ref='navcontainer' collapse>
      <NavForm left role='search'>
        <FormGroup>
          <Input placeholder='Search' />
        </FormGroup>{' '}
        <Button outlined onlyOnHover bsStyle='darkgreen45'>Submit</Button>
      </NavForm>
      <Nav right>
        <NavItem href='#'>Link 3</NavItem>
        <NavItem dropdown>
          <DropdownButton nav container={this} menu='menu39'>
            <span>Dropdown </span><Caret/>
          </DropdownButton>
          <Menu ref='menu39'>
            <MenuItem href='#'>Action</MenuItem>
            <MenuItem href='#'>Another Action</MenuItem>
            <MenuItem href='#'>Something else here</MenuItem>
            <MenuItem divider></MenuItem>
            <MenuItem href='#'>Separated link</MenuItem>
          </Menu>
        </NavItem>
      </Nav>
    </NavContent>
  </Container>
</NavBar>