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