React Bootstrap – Make Navbar Sticky

How to make React bootstrap navbar sticky. Bootstrap navbar sticky code for React JS Apps.

To make the navbar sticky in the React Bootstrap App, add the following property to the Navbar component

sticky='top'

Example Code:

import { Button, Container, Nav, Navbar as NavBarBS } from "react-bootstrap";
import { NavLink } from "react-router-dom";

const NavBar = () => {
  return (
    <NavBarBS sticky='top' className="bg-white shadow-sm mb-3">
      <Container>
        <Nav>
          <Nav.Link to="/" as={NavLink}>
            Home
          </Nav.Link>

          <Nav.Link to="/store" as={NavLink}>
            Store
          </Nav.Link>

          <Nav.Link to="/about" as={NavLink}>
            About
          </Nav.Link>
        </Nav>
        <Button style={{width: "3rem", height:"3rem", position: "relative" }} 
                variant="outline-primary"
            className="rounded-circle">
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
        
          <div className="rounded-circle bg-danger d-flex justify-content-center align-items-center"
            style={{
              color: "white",
              width: "1.5rem",
              height: "1.5rem",
              position: "absolute",
              bottom: 0,
              right:0,
              transform: "translate(25% , 25%)",
            }}>
            4
          </div>
        </Button>
      </Container>
    </NavBarBS>
  );
};

export default NavBar;