Highlighting the Active Subpage in Next.js Navigation Menu

In many web applications, it's common to have a menu that links to different pages or sections of the site. To provide a better user experience, it's helpful to highlight the currently active link, so the user knows where they are on the site. In Next.js 13, we can use the useSelectedLayoutSegment hook from the next/navigation module to achieve this.

Let's start by creating a new component called Menu that will contain our navigation links. We'll use the Link component from Next.js to create our links, and we'll add a className prop to apply styles to our links. Here's the code for our Menu component:

'use client';

import Link from 'next/link';

import { useSelectedLayoutSegment } from 'next/navigation';

export default function Menu() {
  const isActive = (href) => {
    return useSelectedLayoutSegment() === href ? 'active' : '';
  };

  return (
    <div>
      <Link href="/">
        <a className={isActive(null)}>Home</a>
      </Link>
      <Link href="/blog">
        <a className={isActive('blog')}>Blog</a>
      </Link>
      <Link href="/contact">
        <a className={isActive('contact')}>Contact Us</a>
      </Link>
    </div>
  );
}

In this code, we've defined a function called isActive that takes an href argument and returns the string 'active' if the href matches the currently selected layout segment. We use the useSelectedLayoutSegment hook to get the currently selected layout segment, and compare it to the href passed to the isActive function. We then use the className prop to apply the 'active' class to our link if the isActive function returns 'active'.

To use our Menu component, we simply import it into our page component and include it in our main component:

import Menu from '@/components/Menu';

export default function Home() {
  return (
    <div>
      <Menu />
      <h1>Welcome to my website!</h1>
      <p>Check out my latest blog posts:</p>
      {/* ... */}
    </div>
  );
}

In this code, we've imported our Menu component and included it in our main component with some plain text.

Now when we navigate to different pages of our site, the active link in our menu will automatically update based on the currently selected layout segment.

In conclusion, by using the useSelectedLayoutSegment hook from the next/navigation module, we can create dynamic menus with active links in Next.js 13. This can help improve the user experience of our web applications, and make it easier for users to navigate around our site.

Package.json

{
  "name": "weyou",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "flowbite": "^1.6.3",
    "flowbite-typography": "^1.0.3",
    "next": "^13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "^8.0.5",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
}