Navbar
A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.
Default Navbar
<Navbar expand="lg"> <Navbar.Brand href="#home"> <Image src="/images/brand/logo/logo.svg" alt="" loading="lazy" /> </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.Link href="#link" disabled> Disabled </Nav.Link> </Nav> </Navbar.Collapse></Navbar>
A simple flexible branding component. Images are supported but will likely require custom styling to work well.
<Navbar> <Navbar.Brand href="#home"> <Image src="/images/brand/logo/logo-icon.svg" width="30" height="30" alt="" loading="lazy" /> </Navbar.Brand></Navbar>
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"> <Image src="/images/brand/logo/logo.svg" alt="" loading="lazy" /> </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></Navbar><br /><Navbar bg="primary" variant="dark"> <Container> <Navbar.Brand href="#home"> <Image src="/images/brand/logo/logo.svg" alt="" loading="lazy" /> </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" variant="light"> <Container> <Navbar.Brand href="#home"> <Image src="/images/brand/logo/logo.svg" alt="" loading="lazy" /> </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>