Jump Navigation

Usage

The Jump Nav works differently than most blocks. Menu items are generated automatically, in document order, from:

• Any block with a native HTML Anchor
• Legacy Jump Link blocks placed directly before a same-level target

Insert a Jump Nav block, typically near the top of the page, then add anchors to the sections users should reach. The menu updates automatically as targets are added, renamed, or reordered.

For native anchors, the default label is the target block's custom name. If it has no custom name, Jump Nav humanizes the anchor slug (for example, course-details becomes "Course Details"). A Jump Link's title remains its default label.

Use Link labels in the Jump Nav sidebar to override text for that particular nav. Reset restores the current target default, so custom block-name changes update non-overridden labels without erasing intentional overrides.

If no valid targets exist, the block shows "No jump links available" in the editor.

Target validation

Jump Nav warns about duplicate IDs, a redundant Jump Link before an HTML Anchor, trailing Jump Links, multiple markers for one block, and Jump Links inside synced or repeated content.

Legacy Jump Links must be followed by a content block at the same nesting level. On the front end their marker markup is removed and the target ID is projected onto that content block, preserving direct block adjacency.

When to use it

Page navigation systems like this work well for:

• Very long pages with lots of content
• Pages where users are likely hunting for a specific section
• Comparison or reference layouts where users hop between two areas quickly

Your use case may combine these or be something else entirely.

Link styling

Jump Nav links use your site's tag styles. Customize their appearance in the Customizer under Styles — changes to tag typography, color, and background cascade to every Jump Nav on the site.

There is no Reverse Print control on Jump Nav; link colors come from your tag styles.

Appearance

• Sticky — keeps the nav pinned beneath the main site navigation as users scroll between anchor points (on by default)
• Color — background fill from your site palette
• Style — Tags (default), Pills, Line, Indicator, or Highlight for the link treatment
• Orientation — Horizontal (default) or Vertical

Vertical orientation pairs well with column layouts — see the demo for an example.

As the page scrolls, Jump Nav marks the current item as active and adds aria-current="location" to its link. No item is current until a section actually reaches the sticky nav line. Hash links remain native links, so cold page loads, browser back/forward navigation, and JavaScript-disabled navigation still work.

Block width

Jump Nav supports Wide and Full alignment from the block toolbar (default is full width).

HTML Anchors and Jump Links

Prefer native HTML Anchors because they are first-class block settings. Keep Jump Links for existing pages and blocks without anchor support. IDs must be unique regardless of which authoring path you use.