From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Building ScrollDots for navigation

Building ScrollDots for navigation

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Building ScrollDots for navigation

“

Welcome to this session. We're going to build a set of scroll dots for navigation. These dots will be fixed to the right of your screen, acting as visual cues to help users quickly jump between different sections of your portfolio website. to index.jsx inside the Scroll Dots folder. Now, I am adding a sections array to the Scroll Dots component. This array contains the IDs of each section on the page. This makes it easy to dynamically generate the navigation dots without hard-coding each link. I am making this dynamic to ensure that whenever you add or remove sections, updating the sections array is sufficient. This promotes maintainability and prevents potential errors from hardcoding. Let's populate the Scroll Dots component with the links. I use the dot map method to iterate over the sections array, creating an A tag for each section. The href attribute of each link targets the corresponding section, enabling smooth scrolling to each section when clicked. The key prop ensures React…

Contents