Vertical navigation with a line marker that expands on hover and active state.
motion-sv
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
line-nav.svelte
line-nav-item.svelte
index.ts
Usage
usage.svelte
Props
LineNav
Animated navigation list for links to page sections.
| Name | Type | Default | Description |
|---|---|---|---|
items | LineNavItem[] | required | Navigation items containing a title and href. |
activeHref | string | undefined | Href of the currently active item. |
scrollActiveIntoView | boolean | true | Scrolls the active item into view when the component mounts. |
onItemClick | (item: LineNavItem, event: MouseEvent) => void | undefined | Called when a navigation item is clicked. |
class | string | undefined | Additional classes applied to the navigation element. |