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 collapsing the Navbar 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.
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function BasicExample() {
return (
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-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>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default BasicExample;
Brand
A simple flexible branding component. Images are supported but will
likely require custom styling to work well.
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function BrandExample() {
return (
<>
<Navbar className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">Brand link</Navbar.Brand>
</Container>
</Navbar>
<br />
<Navbar className="bg-body-tertiary">
<Container>
<Navbar.Brand>Brand text</Navbar.Brand>
</Container>
</Navbar>
<br />
<Navbar className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">
<img
src="/img/logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
alt="React Bootstrap logo"
/>
</Navbar.Brand>
</Container>
</Navbar>
<br />
<Navbar className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">
<img
alt=""
src="/img/logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
/>{' '}
React Bootstrap
</Navbar.Brand>
</Container>
</Navbar>
</>
);
}
export default BrandExample;
Use <Form inline> and your various form controls within the Navbar.
Align the contents as needed with utility classes.
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function FormExample() {
return (
<Navbar className="bg-body-tertiary justify-content-between">
<Form inline>
<InputGroup>
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
<Form.Control
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</InputGroup>
</Form>
<Form inline>
<Row>
<Col xs="auto">
<Form.Control
type="text"
placeholder="Search"
className=" mr-sm-2"
/>
</Col>
<Col xs="auto">
<Button type="submit">Submit</Button>
</Col>
</Row>
</Form>
</Navbar>
);
}
export default FormExample;
Text and Non-nav links
Loose text and links can be wrapped Navbar.Text in order to
correctly align it vertically.
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function TextLinkExample() {
return (
<Navbar className="bg-body-tertiary">
<Container>
<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>
</Container>
</Navbar>
);
}
export default TextLinkExample;
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!
Dark variants for components were deprecated in Bootstrap v5.3.0 with the introduction
of color modes. Instead of adding variant="dark", set data-bs-theme="dark" on the
Navbar.
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function ColorSchemesExample() {
return (
<>
<Navbar bg="dark" data-bs-theme="dark">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>
<br />
<Navbar bg="primary" data-bs-theme="dark">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>
<br />
<Navbar bg="light" data-bs-theme="light">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>
</>
);
}
export default ColorSchemesExample;
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.
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerOutsideExample() {
return (
<Container>
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#">Navbar</Navbar.Brand>
</Container>
</Navbar>
</Container>
);
}
export default ContainerOutsideExample;
When the container is within your navbar, its horizontal padding is removed at
breakpoints lower than your specified expand={'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
prop. This ensures we’re not doubling up on padding unnecessarily on lower
viewports when your navbar is collapsed.
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
function ContainerInsideExample() {
return (
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#">Navbar</Navbar.Brand>
</Container>
</Navbar>
);
}
export default ContainerInsideExample;
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
Fixed bottom
<Navbar fixed="bottom" />
Sticky top
You can use the navbarScroll prop in a <Nav> to enable vertical scrolling within the toggleable
contents of a collapsed navbar. See the Bootstrap docs
for more information.
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function NavScrollExample() {
return (
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Link" id="navbarScrollingDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default NavScrollExample;
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.
Watch out! You need to provide a breakpoint value to expand in order for the Navbar to collapse at all.
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function CollapsibleExample() {
return (
<Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-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>
</Container>
</Navbar>
);
}
export default CollapsibleExample;
Offcanvas
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component.
We extend both the offcanvas default styles and use the expand prop to create a dynamic and
flexible navigation sidebar.
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints,
set the expand prop to false.
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
function OffcanvasExample() {
return (
<>
{[false, 'sm', 'md', 'lg', 'xl', 'xxl'].map((expand) => (
<Navbar key={expand} expand={expand} className="bg-body-tertiary mb-3">
<Container fluid>
<Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand-${expand}`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
))}
</>
);
}
export default OffcanvasExample;
API
Navbar
NavbarBrand
NavbarToggle
NavbarCollapse