Documentation
v.1.6.1
GETTING STARTED
DYNAMIC ISLAND
Premium element
Interaction
Slide to Navigate
Slide to Navigate enables a smooth, interactive slide-to-unlock animation, ideal for directing users to a new page or section.
Preview
Open previewQuick Setup
To activate the Slide to Navigate feature, add the data-slide-to-navigate attribute to the desired element (preferably a div). Customize the appearance and behavior by setting the following optional attributes.
data-slide-to-navigate'
Required
Activates the Slide to Navigate animation on the element.
data-redirect-url
Required
Specifies the URL to navigate to upon sliding.
Available Presets
data-preset="preset-name"
Optional
modern
minimal
neon
glassmorphism
solid
gradient
neumorphism
retro
Advanced configuration
data-height
Optional
Sets the height of the slider.
Default: 70
data-width
Optional
Determines the base width of the slider.
Default: 100%
data-mobile-width
Optional
Specifies the width of the slider on mobile devices.
data-slider-background
Optional
Sets a custom background color for the slider. Example: #FFFFFF
data-handle-color
Optional
Specifies the color of the handle (slider button).. Example: #000000
data-text-color
Optional
Sets the color of the slider text. Example: #FFFFFF
data-font-size
Optional
Defines the font size of the slider text. Example: 16
data-font-family
Optional
Sets the font family for the slider text. Example: Inter
data-redirect-url
Optional
Sets the font family for the slider text. Example: Inter
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours