GatsbyでアクティブなタブメニューにCSSを適用する

Gatsbyで作成したサイトに以下画像のようなタブメニューを作ったとします。すると当然アクティブなメニューの色を変えて分かりやすくしたくなりますよね。

それ、Gatsby Link API の機能で簡単にできるんです。

実装

元のタブメニューがこれです。

<ul>
 <li><Link to='/'>Top100</Link></li>
 <li><Link to='/about'>About</Link></li>
 <li><Link to='/contact'>Contact</Link></li>
</ul>

このLinkコンポーネントに activeClassName を引数として付けます。実際にはこんな感じです。

<ul>
 <li><Link to='/' activeClassName={style.active}>Top100</Link></li>
 <li><Link to='/about' activeClassName={style.active}>About</Link></li>
 <li><Link to='/contact' activeClassName={style.active}>Contact</Link></li>
</ul>

どうやら Link to で指定したパスと同じパスの場合にのみ、activeClassNameのcssが適用されるようです。つまり to='/about' なら /about ページにアクセスしたときのみ、ということです。

通常Gatsbyではcss適用に className を使いますが、activeClassName も書き方は同じです。 単に特定条件下でのみ有効になるってだけ。

さてcssを適用しましょう。デザインはおいおい考えるとして、とりあえずアクティブなものは赤くします。

.active{
	color:red;
}

完成品

Top100をクリックした場合。

Aboutをクリックした場合。

バッチリです。

補足

この機能はメニューとページのURLが全部1:1になっていれば非常に便利です。ただ例えば私の環境ではURLパスが /10 のときにもTop100がActiveになって欲しいんですがそれは無理っぽいんですよね。どうするのが簡単なんでしょ？