Define new component: Content Navigation

[chachasikes]

Checklist

• Name
• About this component
• Description
• Examples (ca.gov)
• Examples (design systems)
• Features
• Requesting agency

Name

What should we call this component in conversation?

Content Navigation

About this component

Please tell us more about the component.

The content-navigation is a stand-alone web component that accepts a target selector, finds any h2-h6 tags, and builds a list of anchor links. If tags to not have ids, ids are created dynamically so that on clicking the link, it will scroll to that section.

Description

Describe how this component will be used.

This component will be used to help page viewers find content on the page.

Examples from ca.gov properties

(Can be screenshots, a few examples is great. Please include URLs if the examples are live.) This helps everyone understand what you are referring to.

The covid19.ca.gov website used jump links at the top of pages to help reads find relevant information.

Examples from other design systems

If this component is commonly found in other design systems, please link to it. This helps everyone understand real-world examples of this idea.

Not aware of any, requires research.

Features

Critical features to support initially.

• Read page headers and build links to the headers

Requesting agency

Who is requesting this component?

Office of Digital Innovation & Department of Cannabis Control

[chachasikes]

cannabis.ca.gov trackback: cagov/cannabis.ca.gov#53