@frankhoodbs/anchor-menu-cmp

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.