Quick Nav

Ready

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.

Code

Props

Name	Default	Description
title: string		Title of the quick nav component.
links: Link[]		Links of the quick nav component. Each link has the following properties: label: string: Text to be shown in the link. The content must be wrapped with an id equals 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: Link[]: 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>
  );
}

() => {
  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>
  );
}

Props

Examples

Basic usage

Edit this page on GitHub

Progress Bar

NextRadio Group

Quick Nav

Props

Examples

Basic usage

Contents