Jump links

In general, use jump links as a sticky or persistent navigation to help users move through sections of content without scrolling.

There are two available orientations that offer several benefits and risks.

The title should always be included and should default to “Jump to section” if something else is not provided. Use sentence case only and limit title text to 25 characters max.

Vertical jump links are place on the left side of content by default and aligned to the top edge. However, in situations where there is already and element on the left side like a menu, jump links can be placed on the right side of content.

On small screens, both vertical and horizontal jump links collapse into a disclosure which is always located above content. When the disclosure is expanded, jump links are displayed and any page content below is pushed down.

When a page loads, both vertical and horizontal jump links are anchored to the top edge of content or a container before becoming sticky. There are a few things that can happen from here:

• The first section on top is highlighted with a thick red border
• When a user selects a jump link, they are moved down to their chosen section
• The new active section is highlighted
• When a user selects another jump link, they are moved up or down
• When a user scrolls, active sections are highlighted as they pass by

Nested jump links are indented under the parent section. They are hidden by default and become visible when the parent section becomes active by a user clicking on it or scrolling to it. They can be individually selected, but only one level max is recommended.

If jump links are scrolling on top of different background or surface colors, the jump links container needs to have a background color to avoid color contrast issues. If jump links are scrolling on top of a uniform color, no background is needed. Follow these specs as well:

• Use a background color that generally matches the color scheme of the rest of the page
• The border radius must use --rh-border-radius-default token
• Padding on all sides must use the --rh-space-lg token

Vertical jump links can occupy a specific amount of space like a number of grid columns. However, longer text means more line breaks.

Horizontal jump links span the entire page width. However, if the container is not wide enough to display everything, overflow buttons will appear.

To save space, both vertical and horizontal jump links collapse into a disclosure at specific screen sizes.

Learn more about the Disclosure element.

Write a custom title or uses the default which is “Jump to section”.

Do not hide the title or else it might be confusing to users what this element does.

Write short headings so that short jump links are created.

Be aware that long headings will create even longer jump links.

Include a max of eight jump links or use nesting.

Don't overload jump links with too many parent section links.