React に Sticky Navbar を実装する

毎年、デスクトップでのブラウジングから小さな画面に移行するユーザーが増えています。 また、インターネットを閲覧する際のユーザー エクスペリエンスに対する期待も高まっています。

Web 開発者は、変化するユーザーの習慣に適応する必要があります。 Web サイトの応答性が向上し、モバイル ユーザーに適応しています。

固定ナビゲーション バーは、最新の Web アプリケーションで一般的な機能です。 ユーザーは、上にスクロールしてメニューにアクセスすることなく、ページ間を簡単に移動できます。

React に Sticky Navbar を実装する

React は JavaScript ベースのフレームワークです。 HTML に似ているように見えるテンプレート言語 JSX を使用しますが、いくつかの点で異なります。

たとえば、JSX コード内で JavaScript を使用できます。 HTML と同様にスタイルを設定できますが、JSX では className 属性を使用します。

React でスティッキー ナビゲーション バーを実装するには、最初に通常のナビゲーション バーが必要です。 一見すると、JSX コードは HTML と見分けがつかないように見えるかもしれません。

例：

export default function App() {
    return (
        <div className="App">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">FAQ</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

これは、4つのメニュー項目を持つ単純なナビゲーション バーです。 このライブデモにアクセスして、どのように見えるかを確認できます。

この例では、React でナビゲーションを作成するのに役立つ <nav> HTML 要素があります。 各メニュー項目を表す順序なしリストとリスト項目もあります。

技術的には、<span> メニュー項目を含む通常の <div> コンテナにすることもできますが、これはナビゲーション メニューを作成するための広範なアプローチです。

残りの作業は CSS で行う必要があります。 CSS の position プロパティと top プロパティを使用して、ナビゲーション バーを上に揃えます。

具体的には、スタイルシートに次のルールを追加する必要があります。

nav {
    position: sticky;
    top: 0;
}

CSS の position プロパティを使用すると、特定の要素を画面上でどのように配置するかを指定できます。 詳細については、公式の MDN ドキュメント を参照してください。

<ul> 要素をナビゲーション バーのように見せるには、リスト アイテムからドットを削除し、水平方向に積み重ねるようにする必要があります。 背景、幅、高さなど、他の navbar 要素のスタイルを設定することもできます。