Web制作において、表示中のページに応じてナビゲーションメニューのリンクにactiveクラスを付け替えることがあります。
例えば、HOMEページにいる時はHOMEリンクにactiveクラスを付け、ABOUTページにいる時はABOUTリンクにactiveクラスを付けるといった処理です。
例）ABOUTページを開いている場合に、ABOUTにactiveクラスを付与する
今回の記事では、Astroで上記のような実装をする方法を紹介していきます！
検証環境
当記事で紹介する方法は、以下のバージョンで動作確認を行っています。
検証環境のバージョン情報
バージョンの違いによっては、この記事の通りに動作しない可能性がありますので、ご理解いただけますと幸いです。
表示中のページによってactiveクラスを付け替える手順
以下の手順に分けて説明していきます。
- ナビゲーションコンポーネントを作成する
- activeクラス用のスタイルを追加する
- ページのパス名を取得する
- class:listでクラスを動的に付与する
1. ナビゲーションコンポーネントを作成する
まずは、ナビゲーションコンポーネントを作成します。
ヘッダーにナビゲーションを置くことが一般的なので、ここではHeader.astroとしています。
<header class="header">
<nav>
<ul>
<li><a class="link" href="/">HOME</a></li>
<li><a class="link" href="/about">ABOUT</a></li>
<li><a class="link" href="/contact">CONTACT</a></li>
</ul>
</nav>
</header>
※デモなのでクラス名や構成は最小限にしています。
2. activeクラス用のスタイルを追加する
activeクラスがついた要素をハイライトするためのスタイルを用意します。
Astroではstyleタグを直接埋め込めるので、Header.astro内に以下を追記してください。
<style>
/* デフォルトのスタイルを記述 */
.link {
color: black;
}
/* activeクラスがついた時のスタイルを記述 */
.link.active {
color: red;
}
</style>
3. ページのパス名を取得する
次に、表示中のページのパス名を取得します。
AstroではAstro.url.pathnameで現在のページのパス名を取得できます。
Header.astro内の一番上に、以下を追記してください。
---
const pathname = Astro.url.pathname;
---
4. class:listでクラスを動的に付与する
最後に、class:listを使用して、表示中のページに応じてactiveクラスを付与します。
先ほど取得したpathnameを使用して、各リンクのクラスに条件分岐を追加します。
---
const pathname = Astro.url.pathname;
---
<header class="header">
<nav>
<ul>
<li><a class:list={['link', {active: pathname === '/'}]} href="/">HOME</a></li>
<li><a class:list={['link', {active: pathname === '/about'}]} href="/about">ABOUT</a></li>
<li><a class:list={['link', {active: pathname === '/contact'}]} href="/contact">CONTACT</a></li>
</ul>
</nav>
</header>
class:listは、Astroに用意されているディレクティブの一つで、クラスを動的に付与することができます。
ここでは、デフォルトのクラスとしてlinkを指定し、pathname === '〇〇'の条件に合致する場合にactiveクラスを付与しています。
これでほぼ完成なのですが、Astroの本番環境では、pathnameの最後に必ず/が付きます。
それを考慮して、条件分岐を以下のように変更してください。
---
const pathname = Astro.url.pathname;
---
<header class="header">
<nav>
<ul>
<li><a class:list={['link', {active: pathname === '/'}]} href="/">HOME</a></li>
<li><a class:list={['link', {active: /^\/about\/?$/.test(pathname)}]} href="/about">ABOUT</a></li>
<li><a class:list={['link', {active: /^\/contact\/?$/.test(pathname)}]} href="/contact">CONTACT</a></li>
</ul>
</nav>
</header>
/^\/文字列\/?$/とすることで、/文字列でも/文字列/でもactiveクラスを付与できるようになります。
開発環境と本番環境の挙動の違いで個人的に少し詰まったので、参考にしていただければと思います。
以上で、表示中のページによってactiveクラスを付け替える方法の解説は終わりです！
特定のパスの配下にあるページにもactiveクラスを付与する方法
例えば、/blogというパス名のページと、その配下の記事のページ（例：/blog/hello-world）にもactiveクラスを付与したい場合があるとします。
その場合は、pathnameの条件分岐を以下のように変更してください。
---
const pathname = Astro.url.pathname;
---
<header class="header">
<nav>
<ul>
<li><a class:list={['link', {active: /^\/blog(\/|$)/}]} href="/blog">BLOG</a></li>
</ul>
</nav>
</header>
/^\/文字列(\/|$)/とすることで、/文字列と/文字列/の両方に対応しつつ、/文字列の配下にあるページにもactiveクラスを付与できます。
/blog：○/blog/：○/blog/hello-world：○/blog/hello-world/：○/blog-page：×
これで、特定のパスを持つ配下のページにもactiveクラスを付与することができます！
【まとめ】Astroで表示中のページによってactiveクラスを付け替える方法
今回は、Astroで表示中のページによってactiveクラスを付け替える方法を解説しました。
Webサイト制作において、特によく見かける機能かと思います。
もしAstroでサイトを制作する際には、ぜひ参考にしてみてください！
また、当記事で使用したAstro.urlとclass:listについては別で解説記事を出しているので、詳しく知りたい方はぜひご覧ください。
