* Auto-Detect Active Section: The component "spies" on the user's scroll position and automatically highlights the current menu item.
* Smart Centering: Unlike standard anchor links that jump to the top, this component smooth-scrolls the target section to the exact center of the viewport.
* Responsive Layouts: Supports both Vertical (Sidebar) and Horizontal (Top bar) layouts with flexible alignment options.
Every aspect of the design is under your control:
* Typography Mastery: Set distinct Font Styles for Normal and Active states. (e.g., switch from Inter Regular to Inter Bold seamlessly).
* Layout & Direction:
* Vertical / Horizontal: Switch instantly between sidebar and top-bar modes.
* Text Position (Standard/Reverse): Easily create Right-side navigation by reversing the text and dot order.
* Alignment: Start, Center, End, or Space Between.
* Visual Styling:
* Colors: Customize Active, Inactive, and Line colors.
* Sizes: Adjust Dot Size, Line Width, and Gaps.
2. Drag this component onto your canvas.
3. In the properties panel, add items and match the Target ID to your section IDs.
4. Set `Position: Sticky` to keep it visible while scrolling.
---
Stop struggling with complex interactions. Upgrade your navigation experience today!
Minjoo Kim
