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={Logo} 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={LogoIcon} 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={Logo} 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={Logo} 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={Logo} 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>