ヘッダーメニューに下線を足して表示しているページをわかりやすくする

背景と実施したこと

Webページを作る際にヘッダーメニュー（グローバルナビ）を作成する機会は多いと思います。
どれかのメニューをクリックした際には、ページ遷移が起きると思いますが、このときユーザがメニュー上のどこに遷移したのかをわかりやすくしたいと思いました。

言葉でいうと少し分かりづらいですが、動きで示すと以下の雰囲気です。
Afterの方ではメニューに下線を引いていて自分がどのページにアクセスしているかをぱっと見でわかるようにしてみました。

【Before】
（「単語登録」「単語一括登録」はURLが変わっていること以外は画面に変化がなく、わかりにくい）

【After】
（メニューに下線を追加したことで動きが出て、自分がどこにアクセスしたのかがわかる）

■前提
使用している技術のver情報は以下の通りです。
next: 12.1.0
react: 17.0.2
TailwindCSS: 3.0.23

概要

• グローバルナビをクリックしたときに、自分がサイト上にどこのページを開いているのかわかりやすくしたよ。
• 現在のパスを
• 三項演算子を使ってCSSを条件分岐させているよ

実装方法

そんなに難しいことはしていません。
考え方は、「現在のパスとメニューに埋め込んでている遷移先のURLを比較して、一致した場合に下線を表示させる」です
関係ある部分のみを抜粋すると以下です。

pageHeader.tsx

import Link from 'next/link';
import Router, { useRouter } from 'next/router';
import React, { useState } from 'react';
import { MenuList, ExtraMenuList } from './type';

const PageHeader: React.FC = () => {

  const router = useRouter();
  const currentPath = router.asPath;

  const menuList: MenuList[] = [
    {
      text: '単語一覧',
      link: '/',
    },
    {
      text: '単語登録',
      link: '/regist',
    },
    {
      text: '単語一括登録',
      link: '/bulkRegist',
    },
  ];



  return (
    <div className='flex w-full items-center justify-between bg-primary-500'>
      <div>
        <h1 className='px-2 text-lg font-bold text-black md:text-2xl'>英語覚える君</h1>
      </div>
      <div>
        <ul className='hidden items-center gap-8 px-4 sm:flex'>
          {menuList.map((item) => (
            <React.Fragment key={item.text}>
              <li
                className={` py-4 ${item.link === currentPath ? 'border-b-2 border-gray-800' : ''}`}
              >
{/** 遷移先のURLとcurrentPathを比較する。classNameの中で条件分岐させるためテンプレートリテラルを活用する（バッククォート）で括る*/}

                <Link href={item.link}>
                  <a className=' py-4 px-4 font-bold text-black  hover:opacity-50'> {item.text}</a>
                </Link>
              </li>
            </React.Fragment>
          ))}         
        </ul>
      </div>
    </div>
  );
};

export default PageHeader;

補足

ちょっとの工夫でユーザビリティがよくなるのでこの方法は覚えておきたいですね。
一方でちょっとこの実装方法が一番いいのか、というのはありそうです。
「こうしたほうがいいよ！」という意見があればぜひコメントください。

ちなみに、サイトの中でどの位置にいるかを示すためには「パンくずリスト」も効果的のようですね。
この実装方法も今度調べてみようと思います。