@frankhoodbs/anchor-menu-cmp NPM

Anchor menu component

An elegant anchor menu component. This component allows users to navigate through different sections of a page by clicking on links within the menu. The links automatically scroll the page to their corresponding sections. The component leverages the power of Vue 3, Swiper for smooth scrolling, and GSAP for animations.

Props

Prop	Type	Default	Description
`data-links`	`AnchorLink[]`	-	Array of link objects with anchor and label properties.
`data-wrapper-classes`	`Classes`	-	Classes for the menu wrapper.
`data-link-classes`	`Classes`	-	Classes for each link.
`data-center-insufficient-slides`	`boolean`	`true`	Whether or not to center slides if they're insufficient.
`data-space-between-links`	`number`	`0`	Space between each link.
`data-show-overflow-gradient`	`boolean`	`true`	Show gradient when menu overflows.
`data-with-animated-bar`	`boolean`	`true`	Display animated bar under the active link.
`data-animated-bar-animation-duration`	`number`	`0.4`	Duration of the animated bar's animation.
`data-animated-bar-easing`	`string` \| `gsap.EaseFunction`	`'easeInOutCubic'`	Easing function for animated bar's animation.
`data-scroll-duration`	`number`	`1`	Duration of scroll animation when a link is clicked.
`data-scrol-easing`	`string` \| `gsap.EaseFunction`	`'easeInOutCubic'`	Easing function for scroll animation when a link is clicked.

Slots

Slot	Props	Description
`default`	-	Default slot for additional content.
`link`	`link: AnchorLink, index: number, active: boolean`	Slot for customizing how each link is rendered in the menu.

Custom CSS Properties

Property	Default	Description
`--anchor-menu-bar-background`	`white`	Background color of the anchor menu bar.
`--anchor-menu-bar-background-transparent`	`rgba(255, 255, 255, 0)`	RGBA version with 0 opacity of the background color (used for overflow gradients).
`--anchor-menu-bar-sticky-offset-top`	`0px`	Top offset for the sticky anchor menu bar.
`--anchor-menu-bar-padding`	`0px`	Padding for the anchor menu bar.
`--anchor-menu-bar-border-top`	`none`	Border top for the anchor menu bar.
`--anchor-menu-bar-border-bottom`	`none`	Border bottom for the anchor menu bar.
`--anchor-menu-overflow-gradient-width`	`64px`	Width of the overflow gradient.
`--anchor-menu-link-padding`	`0px`	Padding for each link.
`--anchor-menu-link-color`	`black`	Text color for each link.
`--anchor-menu-link-color-hover`	`red`	Text color for each link on hover.
`--anchor-menu-active-bar-width`	`4px`	Width of the active link bar.
`--anchor-menu-active-bar-color`	`red`	Color of the active link bar.