Jump Nav

A row of coloured pills that link somewhere — usually to a section further down the same page, but they work as ordinary links too. The pills wrap onto as many lines as they need and stay centred, so you don’t manage rows yourself; add items and the layout follows.

Add it inside Text image split or Rich text.

Settings

Setting	What it does
Heading	Optional small label above the links, e.g. “Shop by need”. Leave empty for no heading.
Hide heading visually	Keeps the heading for screen readers but hides it on screen. Only appears once you’ve typed a heading.
Alignment	Left, Center or Right. Applies to both the heading and the pills.
Block ID	Optional anchor so other links can jump to this nav.

Blocks accepted

Jump nav item — one per pill. Add, reorder and recolour them freely.

Jump Nav Item settings

Setting	What it does
Label	The pill text. A pill with no label doesn’t render.
Link	Where it goes. Pick a page, product or collection, or paste an external URL.
Anchor	A section ID to jump to, written without the #.
Open in new tab	For external links.
Colour	Sun, Creamsicle, Sky, Lavender, Fern, Warmth or Soft coral.
Block ID	Optional anchor for the pill itself.

Linking to a section on the same page

This is the common case, and it takes two steps:

1. On the target section, set its Section ID — say daily-support.
2. On the jump nav item, put that same value in Anchor, and leave Link empty.

The page will scroll smoothly to that section when the pill is clicked.

Anchor, not Link

For same-page jumps, fill in Anchor and leave Link empty. If you put #daily-support in the Link field instead, the URL picker may not accept it. The # is added for you — type daily-support, not #daily-support.

To jump to a section on a different page, fill in both: pick the page in Link, and put the section’s ID in Anchor.

Colours

The seven options are brand colours, and the design uses five of them across a row — Sun, Creamsicle, Sky, Lavender, Fern. At rest, text is always Deep Green, so every colour meets contrast requirements; you can’t create an unreadable combination.

Vary the colours

The design alternates colours across the row rather than repeating one. Sun → Creamsicle → Sky → Lavender → Fern reads as a set. All-one-colour reads as a list.

Hover state

The colour you pick applies to the pill’s resting state only. On hover — and on keyboard focus — every pill turns the same green (Compliant Leaf) with white text, regardless of its colour setting. That’s intentional: one consistent “you’re about to click this” signal across the whole row.

Note

This means you can’t customise the hover colour per pill, and a pill’s colour setting has no effect on how it looks while hovered.

Tips

• Keep labels short. Pills sit on one line each and don’t truncate, so a long label makes one very wide pill that dominates the row.
• Five or so is the sweet spot. More than that and the wrapping starts to look untidy on tablet widths.
• Set the Section ID first. It’s easier to set anchors on the target sections before building the nav than to go back and forth.
• A heading is optional. With clear labels the nav usually explains itself.