Quick Nav

The quick nav component allows navigation inside a page. It renders the links according to the headings of the content in order to navigate to each section. The navigation is done using the link label or the link label plus sublink label when it is a sublink. If there is any space, it will be replaced by '-'.

Props

Name	Type	Description	Default
title	`string`	Title of the quick nav component.	-
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. 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.	-

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="2rem">
      <DxcQuickNav links={links}></DxcQuickNav>
    </DxcInset>
  );
}

With content

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

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="row">
        <DxcFlex direction="column" gap="2rem">
          <div id="accordion">
            <DxcFlex direction="column" gap="1rem">
              <DxcHeading level={2} text="Accordion" />
              <div id="accordion-code">
                <DxcFlex direction="column" gap="1rem">
                  <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="1rem">
                  <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="1rem">
              <DxcHeading level={2} text="Alert" />
              <div id="alert-code">
                <DxcFlex direction="column" gap="1rem">
                  <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="2rem">
          <DxcQuickNav links={links}></DxcQuickNav>
        </DxcInset>
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- With content

Edit this page on GitHub

Report an issue on GitHub

PreviousRadio group

NextProgress bar

Quick Nav

Props

Examples

Basic usage

With content

Contents