I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, automatically scrolls to that specific section. I attempted to find a solution online and came across react-scroll, but I'm unsure how to integrate it with my existing react-bootstrap code.
Below is my Navbar Component:
export const NavbarComponent = () => {
return (
<>
<Navbar collapseOnSelect className="style-navbar">
<Container>
<Navbar.Brand className="style-navbrand" href="/">
<div class="inl">LOGO</div>
<div className="style-subheading">Subheading</div>
</Navbar.Brand>
<Nav className="style-nav">
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/home">ABOUT</Nav.Link>
</Nav.Item>
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/members">MEMBERS</Nav.Link>
</Nav.Item>
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/pricing">Pricing</Nav.Link>
</Nav.Item>
</Nav>
<Nav>
<Nav.Link id="style-navlink" href="/contact">CONTACT</Nav.Link>
</Nav>
</Container>
</Navbar>
</>
Here's a glimpse into my App.js file:
return (
<div className="style-background">
<div className = "style-backg-sheet">
<NavbarComponent/>
<AboutComponent/>
<MemberComponent/>
<PricingComponent/>
</div>
</div>
);
}
AboutComponent snippet:
import React from 'react'
import {Container} from 'react-bootstrap';
const About = () => {
return (
<div>
<Container>
<h1>About</h1>
<p>Some text</p>
</Container>
</div>
)
}
export default About
In essence, I aim to create distinct sections on a single webpage where clicking on a specific navbar item will highlight it and smoothly scroll down to the corresponding section (e.g., clicking on Pricing would lead to the pricing section displaying text and images).