From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

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

Navbar links, drop-downs, and React icons

Navbar links, drop-downs, and React icons - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Navbar links, drop-downs, and React icons

“

All right, so we have the nav bar started and there's a few things I want to do in this video one I want to make the links work because right now they're just going to the HTML pages from the theme and Then also they're using an a tag. We want to use the link component We also want the drop-downs to work. Basically when I click this profile link, it should have a drop-down also on Mobile screens this should have a drop-down and then finally I just want to add the little Google icon here with font Awesome. Now, in the theme, what we did is use the Font Awesome CDN. And you can even see down here, if I search for Google, we have the eye tag, just like you would if you included the CDN. Obviously, it's not showing because we didn't add that CDN. And I'm not going to. What we're going to do is use a package called React Icons. So we can install that. And then we can import any Font Awesome icons we want into the page. So let's start off by bringing in the link component. So we'll say link…

Contents