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>
Buy Now