# Navigation slider

### Section overview

The Navigation Slider is a horizontal scrolling component similar to Instagram stories that allows users to navigate to different pages or categories with image thumbnails and text labels.

#### Common use cases

* Highlighting key pages or categories for easy navigation
* Creating a visual menu for product collections
* Showcasing featured content or promotions
* Creating story-like navigation for mobile users

#### Usage tips

* Keep headings short and descriptive to avoid text truncation
* Use consistent image sizes and styles for a cohesive look
* Consider mobile users as this component is most effective on smaller screens
* Use high-quality images that look good as circular thumbnails

### Section settings

| Setting              | Description                                                                      |
| -------------------- | -------------------------------------------------------------------------------- |
| Top spacing          | Controls the padding at the top of the section (0-50px)                          |
| Bottom spacing       | Controls the padding at the bottom of the section (0-50px)                       |
| Color scheme         | Sets the background color scheme for the section                                 |
| Custom color         | Custom background color when "Custom" is selected as color scheme                |
| Text color           | Controls whether text appears light or dark                                      |
| Border color         | Sets the color for any borders (subtle or strong)                                |
| Enable color fade    | Allows the section to fade into the page background color                        |
| Border position      | Controls where borders appear (none, top, bottom, or both)                       |
| Size                 | Controls the size of image thumbnails (small: 60px, normal: 100px, large: 140px) |
| Enable margin        | Adds horizontal margin to the section                                            |
| Enable scroll margin | Adds margin to scrollable area                                                   |
| Visibility           | Controls whether section appears on all devices, mobile only, or desktop only    |
| Show images          | Toggles visibility of images in the slider                                       |

### Block settings

#### Slide

A single item in the navigation slider that includes an image, heading, and link.

Block limit: 20 slides

| Setting | Description                                             |
| ------- | ------------------------------------------------------- |
| Image   | The image to display (recommended size up to 256x256px) |
| Heading | Text label shown below the image                        |
| URL     | The destination link when the slide is clicked          |