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.

Desktop navigation links

Desktop navigation links

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

Desktop navigation links

“

Welcome to this session. In this lesson, you'll learn how to add a horizontal navigation bar to your React portfolio website. This navigation bar will allow visitors to easily jump to different sections of your portfolio using links. We'll be working within the navbar component of your React project, and I will guide you step-by-step through the process. By the end of this lesson, you'll have a functional and stylish navigation bar that enhances the user experience of your portfolio. Now I am adding an array called navlinks to store the navigation link's data. Each object in this array contains a label, the text displayed to the user, and a target, the ID of the section the link should scroll to. Currently it only contains the home link, but we'll add more shortly. This structure helps to keep your code organized and easily maintainable. Moving to app.js, you can see the hero section is wrapped inside a div of id hero. Other sections follow the same structure. We will use these IDs to…

Contents