Features
Features
Section titled “Features”The starlight-custom-navigation plugin includes the following features:
- Touch swipe gestures for navigation (swipe left/right)
- Keyboard navigation shortcuts (Ctrl + Left/Right Arrow)
- Customizable button labels and icons
- Responsive design for mobile and desktop
- Automatic hiding of labels on small screens
- Touch-friendly button placement
- Smart scroll behavior with auto-hiding navigation
Touch Swipe Gestures
Section titled “Touch Swipe Gestures”Supports touch swipe gestures for navigation:
- Swipe left to navigate to the previous page
- Swipe right to navigate to the next page
- Minimum swipe distance of 75 pixels to trigger navigation
Keyboard Navigation
Section titled “Keyboard Navigation”Supports keyboard shortcuts for navigation:
- Default:
Ctrl + Left Arrowfor previous page - Default:
Ctrl + Right Arrowfor next page
You can customize these shortcuts using the navShortcuts configuration option.
Smart Scroll Behavior
Section titled “Smart Scroll Behavior”Includes intelligent scroll behavior:
- Navigation buttons appear when scrolling
- Buttons remain visible for 3 seconds after scrolling
- Buttons automatically hide after 3 seconds if scrolled down
- Buttons stay visible when near the top of the page
- Smooth transitions for showing/hiding buttons
Customizable Button Labels and Icons
Section titled “Customizable Button Labels and Icons”Allows you to customize the button labels and icons:
- Show/hide labels on buttons
- Show labels in tooltips when hovering over buttons
- Customize the button icon
- Customize the button radius when labels are hidden
Responsive Design
Section titled “Responsive Design”Designed to be responsive:
- Labels and icons are automatically hidden on small screens
- Buttons are placed in a touch-friendly manner for mobile devices
- Optimized for both desktop and mobile viewing
Automatic Hiding of Labels
Section titled “Automatic Hiding of Labels”Automatically hides labels on small screens to provide a better user experience:
- Labels are hidden when the screen width is less than 768px
- Tooltips show labels on hover when labels are hidden
Touch-Friendly Button Placement
Section titled “Touch-Friendly Button Placement”Places buttons in a touch-friendly manner for mobile devices:
- Buttons are placed in the center of the screen
- Optimized for easy thumb access
- Responsive sizing for different screen sizes