Developed by Codescandy

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Default

<Navbar expand="lg" variant="light">
  <Navbar.Brand href="#home">
    <Image src="/images/logo/freshcart-logo.svg" alt="" />
  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="navbarSupportedContent">
    <Nav className="me-auto" as="ul">
      <Nav.Item as="li"><Nav.Link href="#home" active>Home</Nav.Link></Nav.Item>
      <Nav.Item as="li"><Nav.Link href="#link">Link</Nav.Link></Nav.Item>
      <NavDropdown title="Dropdown" id="navbarDropdown">
        <NavDropdown.Item href="#">Action</NavDropdown.Item>
        <NavDropdown.Item href="#">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#">Separated link</NavDropdown.Item>
      </NavDropdown>
      <Nav.Item as="li"><Nav.Link href="#" disabled>Disabled</Nav.Link></Nav.Item>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Brand

The .navbar-brand can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

<Navbar variant="light">
  <Navbar.Brand>
    <Image src="/images/logo/freshcart-logo.svg" alt="" />
  </Navbar.Brand>
</Navbar>

Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our.navbar-expand-*classes to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the.navbar-expand-*class entirely.

<div className="position-relative">
  <Navbar variant="light" className="bg-light" expand={false}>
    <Container fluid>
      <Navbar.Brand className="fs-3" href="">
        Offcanvas navbar
      </Navbar.Brand>
      <Navbar.Toggle as="span" className="navbar-toggler-icon" onClick={()=>
        toggle()} />
        <Offcanvas show={isToggled} onHide={handleClose} placement="end" id="offcanvasNavbar">
          <Offcanvas.Header closeButton>
            <Offcanvas.Title as="h5" id="offcanvasNavbarLabel">
              Offcanvas
            </Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <Nav as="ul" className="justify-content-end flex-grow-1 pe-3 mb-2">
              <Nav.Item as="ul">
                <Nav.Link as="li" href="">
                  Home
                </Nav.Link>
                <Nav.Link as="li" href="">
                  Pages
                </Nav.Link>
                <Nav.Link as="li" href="">
                  Dashboard
                </Nav.Link>
                <Nav.Link as="li" href="">
                  Docs
                </Nav.Link>
              </Nav.Item>
            </Nav>
            <Form className="d-flex">
              <Form.Control className="me-2" type="search" placeholder="Search" />
              <Button variant="outline-success">
                Search
              </Button>
            </Form>
          </Offcanvas.Body>
        </Offcanvas>
    </Container>
  </Navbar>
</div>
Contents