# Side Navigation

For each breakpoint, you can decide how the menu will be displayed.

### Medium Side Menu

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fkij2rJZjpEFR3ebq91e5%2FMedium%20Side%20Menu.png?alt=media&#x26;token=a69b296a-db3b-4c89-adbb-2df2b7f51fed" alt="Medium Side Menu"><figcaption></figcaption></figure>

### Small Side Menu

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FAHgB4JJCvGiU7piKNxy3%2FScreenshot%202024-08-20%20at%2010.24.52%E2%80%AFAM.png?alt=media&#x26;token=c8583508-678c-44ae-b877-4d613790c1dd" alt="Small Side Menu"><figcaption></figcaption></figure>

### Top Bar Menu

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F7LLRxrLyYqL9PAxmbd2W%2FTop%20Bar%20Menu.png?alt=media&#x26;token=c2041f12-8e93-4f39-876b-415b4e8a1dca" alt="Side Top Bar Menu "><figcaption></figcaption></figure>

### Top Offset

Top Offset refers to the amount of space between the top of the screen and the top of the Side Navigation component.&#x20;

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F4cXWp76s9jkfKLyUeSmi%2FTop%20Offset.png?alt=media&#x26;token=fc6593db-beff-4d7c-90da-f23461a8f9e3" alt="Top Offset Side Navigation "><figcaption></figcaption></figure>

### When the Top Menu Bar Is Open...

{% hint style="info" %}
To see this in the Builder, see Menu Style and be on the Mobile Breakpoint.
{% endhint %}

Adjust these settings to change the Top Bar Menu Icon, Top Bar Menu Back Icon, and Overlay between the component and remaining space on the screen.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FQsZAzDDqDeAnRUYLq8QJ%2FTop%20Bar%20Menu%20Open.png?alt=media&#x26;token=96b86eb5-9b0e-4b1f-9975-d78742d22c2e" alt="When Menu Bar Is Open Side Navigation "><figcaption></figcaption></figure>