Navbar
A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.
<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>
<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>