From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

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

Adding profile drop-down

Adding profile drop-down - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Adding profile drop-down

“

Now, let's add the profile drop down menu which will have the two options, the wishlist and the logout button. So first, I'll import the link tag from the next link library. After the user icon div, I will write div then add link, href, the root, my wishlist and the logout button. Now I will wrap the div of icons and the div of the drop down menu with another div and I will give a relative class to it and giving a custom class to the div of the drop down menu. Let's go to the global CSS file and add the custom class .dropdown menu and we'll say add apply, absolute width right position 0, margin top 2, width 48, background white, the border, border rounded medium, also give some box shadow to the menu and finally adding the font weight medium. Let's save the code and go to the browser. You can see the drop down menu is ready, but the menu options are in one row. So to bring them into a column, I'll give styles to the link tag by saying display block padding on x-axis 4 and padding on…

Contents