Component: In-page anchor navigation

[sfimbres]

Describe the problem to be solved

We currently do not have a great solution for adding in-page anchor navigation on our platforms besides using rich text. A dedicated sidebar component would greatly improve in-page navigation interface and experience.

Suggested solution

Implement an In-Page anchor navigation component to be used across our Internal and External platforms

Examples:

• USWDS: https://designsystem.digital.gov/components/in-page-navigation/#about-the-in-page-navigation-component
• HDS: https://science.nasa.gov/solar-system/whats-up-april-2026-skywatching-tips-from-nasa/
• Current OTT Website: https://ott.jpl.nasa.gov/software

Additional context

Examples of current implementation with rich text

Screenshots of Component Examples

[stephiescastle]

Bringing a discussion from our WCP CMS over here since it's a wider Explorer-1 issue. On WCP, a user made the following feature request:

Describe the problem to be solved

No simple and easy way to create a block of links for quick navigation for inner page (anchors) and children pages.

Suggested solution

A simple way to include a list of links in either vertical or horizontal format for links. Fully accessible by screen readers and keyboard navigation.

Examples of DIY workarounds can be viewed in the original WCP issue.

We discussed this need further with Paul Lumsdaine, the original requestor, and it seems like we need two different things:

• A block-level component of horizontal links that can be added anywhere on the page, even multiple times.
• A template-level sidebar navigation layout. This template would have left sidebar menu items, and main body blocks would be limited to those that aren't full-width and wouldn't conflict layout-wise with the left sidebar

For both of the above use-cases, the contents of the menus/links would be fully customizable, and not automatically generated based on page tree or page headings.

We also discussed how Explorer-1's secondary navigation isn't very compatible with stacking with the internal navigation.

[LindseyTran]

Get Design input for this sprint.

[jpl-pjl]

Here are some ideas for the In-page navigation design. Simple and largely based off the existing design for Go sites.

Navigation with Various Types of Links (Dropdown/Children, External, Anchor)

Navigation with additional right hand link

Navigation with Title