New Contents navigation component

Description

Explore adding an in-page navigation component for longer pages.

Problem to solve

Hypothesis: we assume this problem exists, because some teams have tried to solve it using the following pattern.

Problems: We don't have a component that may be applied in the following case.

  • When there is a lot of non-linear information possibly with a long scrolling, and users need to jump between the different information.
    • If users don't need to jump between the elements: a collapsible button.
    • If the information doesn't have a hierarchy: a file tree view

Proposal

Create a content navigation pattern, using a component to display all titles on a page and work as anchor links in a list.

For example, we already have this pattern in our docs site.

Image Behavior
Screenshot_2023-08-04_at_08.48.01 on-this-page

Additional use cases

Along with the existing usage in our docs site, we've identified these additional potential use cases

Use case Screenshot Group Implemented?
Settings UI (need to link the issue or discussion thread) groupux paper cuts N
CI/CD Catalog - components detail page ci-catalog-on-this-page grouppipeline authoring N, in the planning phase.
Wiki Screenshot_2023-08-11_at_14.37.28 groupknowledge N, example link

Pajamas doesn't have a minimum number of use cases defined, but Nathan Curtis offers this advice:

  • Useful only to your product? Not good enough.
  • Useful to another product? Let’s at least chat about how useful.
  • Useful to 3 products? Got it, let’s at least discuss this with the community.
  • Useful to 5 products? It probably belongs.

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. When applicable, create an issue using the Figma update issue template to update the component in Figma, and mark it as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
  4. When applicable, create an MR in GitLab UI to update the component. If you do not have capacity or are unable to update the component directly, create a GitLab UI issue using the Component issue template. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting.
  6. 🎉 Congrats, you made it! You can now close this issue.
Edited by Sunjung Park