Next.js 15 Tutorial - 20 - Active Links
How to Style Active Links in Next.js
Previously we learned about navigating between routes using the Link component. In this video, we'll dive into styling active links to highlight the current page in the navigation menu. We'll use Next.js's usePathName hook and Tailwind CSS for styling. Starting with a prepared layout in auth routes, we'll map out links for 'register', 'login', and 'forgot password'. Learn how to identify active links, apply conditional styles, and ensure the styling is visible in the browser.
📔 GitHub Repo - https://github.com/gopinav/Next.js-15-Tutorials
📘 Frontend Interview Course - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav
📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb
📫 Business - codevolution.business@gmail.com
00:00 Introduction to Active Link Styling
00:22 Setting Up the Navigation Links
01:03 Implementing the usePathName Hook
02:19 Adding Conditional Styling
03:08 Final Touches and Testing
03:49 Conclusion and Call to Action
Видео Next.js 15 Tutorial - 20 - Active Links канала Codevolution
Previously we learned about navigating between routes using the Link component. In this video, we'll dive into styling active links to highlight the current page in the navigation menu. We'll use Next.js's usePathName hook and Tailwind CSS for styling. Starting with a prepared layout in auth routes, we'll map out links for 'register', 'login', and 'forgot password'. Learn how to identify active links, apply conditional styles, and ensure the styling is visible in the browser.
📔 GitHub Repo - https://github.com/gopinav/Next.js-15-Tutorials
📘 Frontend Interview Course - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav
📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb
📫 Business - codevolution.business@gmail.com
00:00 Introduction to Active Link Styling
00:22 Setting Up the Navigation Links
01:03 Implementing the usePathName Hook
02:19 Adding Conditional Styling
03:08 Final Touches and Testing
03:49 Conclusion and Call to Action
Видео Next.js 15 Tutorial - 20 - Active Links канала Codevolution
Комментарии отсутствуют
Информация о видео
7 января 2025 г. 15:00:01
00:03:57
Другие видео канала
Expo Router - 15 - API Routes
Next.js 14 Tutorial - 27 - Handling Errors in Layouts
Next.js 15 Tutorial - 43 - Cookies in Route Handlers
React Testing Tutorial - 11 - Filtering Tests
Next.js Tutorial - 39 - Pre-rendering & Data Fetching Summary
Next.js Tutorial - 11 - Navigating Programmatically
Next.js 14 Tutorial - 34 - Handling GET Request
Next.js 14 Tutorial - 4 - Before We Start
Node.js Tutorials - 18 - Built-in Modules
JavaScript Data Structures - 5 - Map
React Testing Tutorial - 13 - Filename Conventions
React Native Tutorial - 30 - Align Items
React Testing Tutorial - 20 - getByLabelText
✨ Announcing Visual Copilot! AI Powered Figma to Code
Next.js 14 Tutorial - 21 - Navigating Programmatically
React + Express Tutorial - Build a Dynamic Event Ticket
Did you know GitHub Copilot can do this?
Next.js 14 Tutorial - 29 - Unmatched Routes
Do You Know This Simple Dark Mode Trick? #shorts
React TypeScript Tutorial - 15 - useContext Future Value
Vue JS 3 Tutorial - 39 - Slots Props
