Docs

Menu Anchor

An invisible target that one-page menu links scroll to.

On this page

The Menu Anchor is an invisible marker on the page. A link to # plus its name, for example #pricing, scrolls the page to it. Use it for one-page menus, “Back to top” links or a button that jumps to a form further down. Visitors never see the anchor; in the editor it shows as a small #pricing label.

The editor with a Menu Anchor selected just above a Pricing section, showing the #pricing label on the canvas and the Anchor ID and Scroll offset settings in the inspector
A Menu Anchor above the Pricing section, with its settings in the inspector.

Add a menu anchor

  1. Insert it above the target

    Open Insert in the left panel, find Menu Anchor under Basic (or type anchor in Search widgets) and drop it just above the heading or section you want to reach.

  2. Name it

    Type an Anchor ID such as pricing: letters, numbers and dashes only, unique on the page.

  3. In a button, a menu item or text, set the link to #pricing (or /page/#pricing from another page).

  4. Leave room for a sticky header

    If your header stays on screen, set Scroll offset to about its height so the target is not hidden under it.

Settings

Content tab

Menu anchor
SettingWhat it does
Anchor IDThe name links use to jump here: with pricing, a link to #pricing scrolls to this spot. Letters, numbers and dashes only, and unique on the page.
Scroll offsetSpace kept above the anchor when the page scrolls to it, for example the height of a sticky header.

Design tab

Shared Design sections

Every element also has these sections at the end of the Design tab.

SectionWhat it does
Spacing & positionMargin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position.
Background & borderBackground, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows.
MaskCrops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks.

Behaviour tab

Behaviour sections

The Behaviour tab is the same for every element.

SectionWhat it does
Anchor & classesAn Anchor ID for #links and your own CSS classes.
AnimationsEntrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects.
Motion & effectsA simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning.
Scroll & mouse effectsMovement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt).
VisibilityHide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility.
ConditionsShow the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions.
InteractionsShow, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions.
AttributesCustom HTML attributes for this element. See Anchor, classes & attributes.

Tips

  • Any element can be a target. Every element also has an Anchor ID in Behaviour → Anchor & classes. The Menu Anchor is handy when you want the jump to stop above an element, or need an offset.
  • Smooth scrolling. Turn on Smooth scrolling in Styles → Theme → Site behaviour for a gentle scroll instead of a jump. See Lightbox & site behaviour.
  • Menu links. In Appearance → Menus, add a Custom link with the URL #pricing (or the full page URL plus #pricing) for a one-page menu.
ButtonA button that links to the anchor. Nav MenuA menu for one-page navigation. Table of ContentsLinks to every heading on the page. SpacerBlank vertical space.