Component
Linehover highlights important links with simple visual effects that improve readability and navigation. It is fully customizable to fit your design and style needs.
Built with smart behavior in mind, it avoids applying styles to images and SVG links, ensuring clean and predictable results. Linehover also includes dedicated options for use with standard elements and the Menu component.
Options:
✓ Defines the main behavior and geometry of the animated line.
Line thickness and scaling behavior
Auto-adjust thickness to text height
↑↓ Vertical line offset, |←→| Inner link spacing, ←|→ Outer link spacing
✓ Style – Animated Line
Controls the visual appearance of the animated line.
Tilt Linehover with the Skew, range from - to +20 deg
Corner rounding level
Opacity level
Color inversion: moderate / neutral / inverse
✓ Style – Line Overlay (second layer)
Controls the appearance of the line overlay.
Color: solid or gradient with direction
Opacity level
Overlay layer: current color / light / neutral / dark
Blur effect
✓ Animation
Controls how the line animation behaves and responds.
Animation direction: left, center, or right origin
Animation speed
Motion easing curve
✓ Link Display
Defines static visual styling applied to links.
Shadow effect on links (supports custom inset shadow for full fill)
Corner rounding controls link shape and curvature
✓ Text link
Text wrapping: prevent line wrapping in links.
ⓘ Linehover is optimized for single-line links, using whitespace to align links.
Apply to links: Uppercase / Lowercase / Capitalize & Italic
✓ Advanced
ⓘ Contains layout rules for the Menu Component
Apply settings only to submenus
Disable animated line in submenus
Disable 'Link Display' styles in submenus