# Navigation links

### Section overview

Navigation links is a slideshow-like component similar to Instagram stories that displays circular images with text labels underneath. It can be configured as either a slider or a grid layout.

#### Common use cases

* Highlight key navigation categories or pages in a visually appealing way
* Create a visual navigation menu for featured collections
* Display a set of linked categories with consistent styling
* Create a mobile-friendly navigation experience

#### Usage tips

* Use appropriately sized images (recommended 256px by 256px) for best results
* Keep heading text short and concise for better mobile display
* For mobile use, the slider view is generally more effective than grid view
* Consider visibility settings to show different navigation styles on desktop vs mobile

### Section settings

| Setting         | Description                                                                           |
| --------------- | ------------------------------------------------------------------------------------- |
| Top spacing     | Controls the padding above the section (0-50px)                                       |
| Bottom spacing  | Controls the padding below the section (0-50px)                                       |
| Color scheme    | Sets the background and text color theme for the section                              |
| Border color    | Sets the color of any borders used in the section                                     |
| Border position | Controls where borders appear (none, top, bottom, or both)                            |
| Size            | Determines the size of the circular images (small: 60px, normal: 100px, large: 140px) |
| Container       | Choose between slider (scrollable) or grid layout                                     |
| X alignment     | Sets horizontal alignment (left, center, or right)                                    |
| Enable margin   | When enabled, applies horizontal margin to the section                                |
| Visibility      | Controls whether the section is visible on all devices, mobile only, or desktop only  |

### Block settings

#### Link

The Link block creates a circular image with a text label that links to a URL. Each block represents a single navigation item.

Block limit: 20

| Setting | Description                                                                 |
| ------- | --------------------------------------------------------------------------- |
| Image   | The image to display in the circular container (recommended 256px by 256px) |
| Heading | The text label displayed below the image                                    |
| URL     | The destination page when the navigation item is clicked                    |