Navbars

    A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more

    Overview

    Here’s what you need to know before getting started with the navbar:

    • use the expand prop to allow for nvabar collapsing at lower breakpoints.
    • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
    • Use spacing and flex utilities to size and position content

    A responsive navigation header, including support for branding, navigation, and more. Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

    <Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#link">Link</Nav.Link>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-success">Search</Button>
    </Form>
  </Navbar.Collapse>
</Navbar>;
    Press esc to disable tab trapping

    Brand

    A simple flexible branding component. Images are supported but will likely require custom styling to work well.




    <>
  <Navbar bg="light">
    <Navbar.Brand href="#home">Brand link</Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="light">
    <Navbar.Brand>Brand text</Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="dark">
    <Navbar.Brand href="#home">
      <img
        src="/logo.svg"
        width="30"
        height="30"
        className="d-inline-block align-top"
        alt="React Bootstrap logo"
      />
    </Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">
      <img
        alt=""
        src="/logo.svg"
        width="30"
        height="30"
        className="d-inline-block align-top"
      />
      {' React Bootstrap'}
    </Navbar.Brand>
  </Navbar>
</>;
    Press esc to disable tab trapping

    Forms

    Use <Form inline> and your variaous form controls within the Navbar. Align the contents as needed with utility classes.

    <Navbar className="bg-light justify-content-between">
  <Form inline>
    <InputGroup>
      <InputGroup.Prepend>
        <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
      </InputGroup.Prepend>
      <FormControl
        placeholder="Username"
        aria-label="Username"
        aria-describedby="basic-addon1"
      />
    </InputGroup>
  </Form>
  <Form inline>
    <FormControl type="text" placeholder="Search" className=" mr-sm-2" />
    <Button type="submit">Submit</Button>
  </Form>
</Navbar>;
    Press esc to disable tab trapping

    Text and Non-nav links

    Loose text and links can be wrapped Navbar.Text in order to correctly align it vertically.

    <Navbar>
  <Navbar.Brand href="#home">Navbar with text</Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse className="justify-content-end">
    <Navbar.Text>
      Signed in as: <a href="#login">Mark Otto</a>
    </Navbar.Text>
  </Navbar.Collapse>
</Navbar>;
    Press esc to disable tab trapping

    Color schemes

    Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from variant="light" for use with light background colors, or variant="dark" for dark background colors. Then, customize with the bg prop or any custom css!



    <>
  <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-info">Search</Button>
    </Form>
  </Navbar>
  <br />
  <Navbar bg="primary" variant="dark">
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-light">Search</Button>
    </Form>
  </Navbar>

  <br />
  <Navbar bg="light" variant="light">
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-primary">Search</Button>
    </Form>
  </Navbar>
</>;
    Press esc to disable tab trapping

    Containers

    While not required, you can wrap the Navbar in a <Container> component to center it on a page, or add one within to only center the contents of a fixed or static top navbar.

    <Container>
  <Navbar expand="lg" variant="light" bg="light">
    <Navbar.Brand href="#">Navbar</Navbar.Brand>
  </Navbar>
</Container>;
    Press esc to disable tab trapping

    When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified expand={'sm' | 'md' | 'lg' | 'xl'} prop. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

    <Navbar expand="lg" variant="light" bg="light">
  <Container>
    <Navbar.Brand href="#">Navbar</Navbar.Brand>
  </Container>
</Navbar>;
    Press esc to disable tab trapping

    Placement

    You can use Bootstrap's position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

    Since these positioning needs are so common for Navbars, we've added convenience props for them

    Fixed top

    <Navbar fixed="top" />

    Fixed bottom

    <Navbar fixed="bottom" />

    Sticky top

    <Navbar sticky="top" />

    Sticky bottom

    <Navbar sticky="bottom" />

    Responsive behaviors

    Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.

    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 collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>;
    Press esc to disable tab trapping

    API

    Navbarview source file

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType
    		<nav>

    Set a custom element for this component.

    bg
    string

    A convenience prop for adding bg-* utility classes since they are so commonly used here. light and dark are common choices but any bg-* class is supported, including any custom ones you might define.

    Pairs nicely with the variant prop.

    collapseOnSelect
    boolean
    		false

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

    Manually controlling expanded via the onSelect callback is recommended instead, for more complex operations that need to be executed after the select event of <Nav> descendants.

    expand
    true | 'sm' | 'md' | 'lg' | 'xl'
    		true

    The breakpoint, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size.

    expanded
    boolean
    controlled by: onToggle, initial prop: defaultExpanded

    Controls the visiblity of the navbar body

    fixed
    'top' | 'bottom'

    Create a fixed navbar along the top or bottom of the screen, that scrolls with the page. A convenience prop for the fixed-* positioning classes.

    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 (
 eventKey: mixed,
 event?: SyntheticEvent
)

    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.

    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.

    role
    string
    		'navigation'

    The ARIA role for the navbar, will default to 'navigation' for Navbars whose as is something other than <nav>.

    sticky
    'top' | 'bottom'

    Position the navbar at the top or bottom of the viewport, but only after scrolling past it. . A convenience prop for the sticky-* positioning classes.

    Not supported in <= IE11 and other older browsers without a polyfill

    variant
    'light' | 'dark'
    		'light'

    The general visual variant a the Navbar. Use in combination with the bg prop, background-color utilities, or your own background styles.

    bsPrefix required
    string
    		'navbar'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Navbar.Brandview source file

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType

    Set a custom element for this component.

    href
    string

    An href, when provided the Brand will render as an <a> element (unless as is provided).

    bsPrefix
    string
    		'navbar'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Navbar.Toggleview source file

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType
    		<button>

    You can use a custom element type for this component.

    children
    node

    The toggle content. When empty, the default toggle will be rendered.

    label
    string
    		'Toggle navigation'

    An accessible ARIA label for the toggler button.

    bsPrefix
    string
    		'navbar-toggler'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Navbar.Collapseview source file

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    bsPrefix
    string
    		'navbar-collapse'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.