Navbar

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

Default Navbar

Design
Code
<Navbar expand="lg">                             
    <Navbar.Brand href="#home">
        <Image src="/images/brand/logo/logo-primary.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.

Design
Code
<Navbar>
    <Navbar.Brand href="#home">
        <Image src="/images/brand/logo/brand-logo.png" 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!

Design
Code
<Navbar bg="dark" 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="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>