Widget Demos
UI Components
Marketing
Content Display
Navigation
Notifications
Visual Effects
Interactive
Layout
Navigation
Section Navigation Widget
Fixed navigation dots and arrows for navigating between page sections. Perfect for long-form landing pages. Sections must have data-section attribute.
Feature Disabled
The scrollNavigation feature is currently disabled. Enable it in params.php to see live demos.
Dots with Arrows
Dot indicators with up/down navigation arrows.
Add data-section="Name" to your page sections.
Code
<?php echo SectionNavigationWidget::widget([
'showDots' => true,
'showArrows' => true,
'position' => 'right',
]); ?>Live Demo
Enable the feature to see live demo.
Dots with Labels
Show section labels on hover.
Code
<?php echo SectionNavigationWidget::widget([
'showDots' => true,
'showLabels' => true,
'showArrows' => false,
]); ?>Live Demo
Enable the feature to see live demo.
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
position | string | right | Position: left, right, none |
showDots | bool | true | Show dot indicators |
showArrows | bool | true | Show up/down arrows |
showLabels | bool | false | Show section names |
size | string | medium | Size: small, medium, large |