Skip to content
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 |