DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Quick nav

The quick nav component allows navigation inside a page. It renders links according to the headings of the content structure, enabling users to jump to specific sections. The navigation label is based on the section title or a combination of section and sub-section titles (for nested links). If a heading includes spaces, they are replaced with hyphens (-) in the URL.

Overview
Code

Props

NameTypeDescriptionDefault
Required
links
{ label: string; links?: Link[]; }[]Links of the quick nav component. Only first and second level links will be shown in the quick nav, due to design restrictions. The component automatically detects HashRouter usage and enables smooth scrolling navigation when appropriate. Each link has the following properties:
  • label: Text to be shown in the link. The content must be wrapped with an id equal to the slugified label (in lower case and the white spaces replaced by '-') in order to be able to navigate to the section that the label references.
  • links: Sublinks of the link.
-
titlestringTitle of the quick nav component.-

Examples

Basic usage

() => {
  const links = [
    {
      label: "Overview",
    },
    {
      label: "Principles",
      links: [
        { label: "Color" },
        { label: "Spacing" },
        { label: "Typography" },
        { label: "Layout" },
        {
          label: "Themes",
          links: [{ label: "Light" }, { label: "Dark" }],
        },
      ],
    },
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcQuickNav links={links} />
    </DxcInset>
  );
}

With content

() => {
  const links = [
    {
      label: "Accordion",
      links: [{ label: "Code" }, { label: "Usage" }],
    },
    {
      label: "Alert",
      links: [{ label: "Code" }],
    },
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="row">
        <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
          <div id="accordion">
            <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
              <DxcHeading level={2} text="Accordion" />
              <div id="accordion-code">
                <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
                  <DxcHeading level={3} text="Code" />
                  <DxcParagraph>
                    Accordions are used to group similar content and hide or
                    show it depending on user needs or preferences. Accordions
                    give users more granular control over the interface and help
                    digest content in stages, rather than all at once.
                  </DxcParagraph>
                </DxcFlex>
              </div>
              <div id="accordion-usage">
                <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
                  <DxcHeading level={3} text="Usage" />
                  <DxcParagraph>
                    The accordion component delivers large amounts of content in
                    a small space through progressive disclosure.
                  </DxcParagraph>
                </DxcFlex>
              </div>
            </DxcFlex>
          </div>
          <div id="alert">
            <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
              <DxcHeading level={2} text="Alert" />
              <div id="alert-code">
                <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
                  <DxcHeading level={3} text="Code" />
                  <DxcParagraph>
                    Alert messages are meant to provide contextual feedback
                    about important changes in the interface.
                  </DxcParagraph>
                </DxcFlex>
              </div>
            </DxcFlex>
          </div>
        </DxcFlex>
        <DxcInset space="var(--spacing-padding-xl)">
          <DxcQuickNav links={links} />
        </DxcInset>
      </DxcFlex>
    </DxcInset>
  );
}
On this page