# サイドナビゲーション

各ブレークポイントごとに、メニューの表示方法を決定できます。

### ミディアムサイドメニュー

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5a7e74e310f998fdb2c2cf4796e4cc415703d623%2FMedium%20Side%20Menu.png?alt=media" alt="Medium Side Menu"><figcaption></figcaption></figure>

### スモールサイドメニュー

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-93fe3c96e53a8f13ea220ddbbb954ee8bbeebc53%2FScreenshot%202024-08-20%20at%2010.24.52%E2%80%AFAM.png?alt=media" alt="Small Side Menu"><figcaption></figcaption></figure>

### トップバーメニュー

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-4c937be883684f8f0e622edecaa4945e47d9d38d%2FTop%20Bar%20Menu.png?alt=media" alt="Side Top Bar Menu"><figcaption></figcaption></figure>

### トップオフセット

トップオフセットとは、画面の上部とサイドナビゲーションコンポーネントの上部との間のスペースの量を指します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-2cd9d37cbe00a0aa85bab14d31ef55c1409c6879%2FTop%20Offset.png?alt=media" alt="Top Offset Side Navigation"><figcaption></figcaption></figure>

### トップメニューバーが開いている場合...

{% hint style="info" %}
ビルダーでこれを確認するには、メニュースタイルを見て、モバイルブレークポイントに設定してください。
{% endhint %}

これらの設定を調整して、トップバーメニューアイコン、トップバーメニューバックアイコン、コンポーネントと画面上の残りのスペースとの間のオーバーレイを変更します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a8cb59730220fb8535bbbcf51b88653ae0e74727%2FTop%20Bar%20Menu%20Open.png?alt=media" alt="When Menu Bar Is Open Side Navigation"><figcaption></figcaption></figure>