Left-hand side navigation

A vertical navigation component used to display hierarchical menu items in a sidebar.

Summary

Use the left-hand side navigation component when you need to show a vertical list of navigation links in a sidebar or side panel. It works well for navigation structures with sections and sub-sections. The component supports collapsible sections, status indicators and lock indicators to help users understand what is available and where they are in the navigation.

Left-hand navigation is intended to support sections where pages have a clear relationship to each other. For example, course-based information, account areas, learning areas, and other structured sections where related pages would benefit from being shown together.

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Navigation title 1
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Navigation title 2
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              Navigation title 3
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              Navigation title 4
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              Navigation title 5
            </div>
          </div></a
        >
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: false,
  showStatus: false,
  items: [
    {
      text: "Navigation title 1",
      href: "#"
    },
    {
      text: "Navigation title 2",
      href: "#"
    },
    {
      text: "Navigation title 3",
      href: "#"
    },
    {
      text: "Navigation title 4",
      href: "#"
    },
    {
      text: "Navigation title 5",
      href: "#"
    }
  ]
}) }}

Use this variation for simple navigation structures where all items are on the same level. It is suitable for straightforward navigation and section menus without nested categories.

When to use

Use left-hand navigation for self-contained areas of a site that need a distinct navigation structure.

It is useful when:

there is a clear relationship between pages in a section
users need to move between related pages without leaving the section
users need to understand where they are within a hierarchy
a section has multiple levels of related content
course-based information or learning progress needs to be shown in context
the navigation helps users understand the structure of the section they are in

Left-hand navigation should help users see related items alongside the content they are viewing.

When not to use

Do not use left-hand navigation when there is no direct relationship between the levels or pages.

It should not be used:

as a way to show unrelated links together
as a way to move the user away from the section that is being grouped by the left-hand navigation
as an anchor navigation pattern for headings on a single page
during a transactional process
when the page structure does not need multiple levels
when a simpler navigation pattern would be easier to understand
when the navigation would add unnecessary complexity to the page

Left-hand navigation should not be used to expose more links. It used where the structure helps users understand and move through a related area of content.

How it works

Left-hand navigation sits on the left-hand side of the page on desktop.

The current page is highlighted so users can understand where they are in the section. Navigation can contain up to 3 levels within the component, with each level opening into its own nested container.

The component should support:

a parent page or section
nested navigation items
highlighting the current page
showing related pages within the same section
deep linking to pages within the section

On smaller screens, the navigation collapses into a button. When selected, the button opens a fly-out menu from the left-hand side of the screen.

The navigation should be positioned near the top of the page and sit below any headings that introduce the section and above the content that the navigation controls. The mobile button is part of the left-hand navigation component, and when visible, it will appear in the same space the left-hand navigation occupies within the browser.

Configuration

Expanded sections

Collapsible sections are closed by default. To display a section in its expanded state, add expanded: true to the parent item:

{
  text: "Section title",
  href: "#",
  expanded: true,
  children: [...]
}

showLocks (boolean) - Determines whether space will be made for lock icons
showStatus (boolean) - Determines whether space will be made for status icons
activeHref (string) - The URL path of the active item used to determine selection status and path expansion context across the menu tree

Item properties

text (string) - The display text for the navigation item
href (string) - The URL the item links to
locked (boolean) - Whether the item is locked; defaults to false
status (string) - The status of the item ("complete", "unstarted", or "false"); defaults to "false"
expanded (boolean) - Whether expandable sections are initially open; defaults to false
children (array) - Array of child navigation items (up to 2 levels of nesting)

Example/s, variants and states including code and design assets

Below are the framework-specific macros and design file paths for the respective variations.

Status indicators

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Navigation title 1
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Navigation title 2
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              Navigation title 3
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          ></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              Navigation title 4
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              Navigation title 5
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: false,
  showStatus: true,
  items: [
    {
      text: "Navigation title 1",
      href: "#",
      status: "complete"
    },
    {
      text: "Navigation title 2",
      href: "#",
      status: "unstarted"
    },
    {
      text: "Navigation title 3",
      href: "#",
      status: "false"
    },
    {
      text: "Navigation title 4",
      href: "#",
      status: "complete"
    },
    {
      text: "Navigation title 5",
      href: "#",
      status: "unstarted"
    }
  ]
}) }}

Use this variation to display the completion status of navigation items. Status indicators help users understand progress through a multi-step process or workflow.

The accepted status values are:

"complete" - shows a checkmark icon indicating the item is complete
"unstarted" - shows an empty circle icon indicating the item has not been started
"false" - no status icon is displayed

Icons must match the content on the page and be explained clearly. If a page shows a status icon, it should also include text to explain what the status is indicating.

In order for status icons to display, the whole menu setting of showStatus must be set to true

Lock indicators

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Navigation title 1
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          ></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Navigation title 2
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg>
            </span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              Navigation title 3
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          ></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              Navigation title 4
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          >
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg>
            </span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              Navigation title 5
            </div>
          </div>
          <div
            class="tel-lhs-navigation__right-group tel-lhs-navigation__right-group--single"
          ></div
        ></a>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: true,
  showStatus: false,
  items: [
    {
      text: "Navigation title 1",
      href: "#",
      locked: false
    },
    {
      text: "Navigation title 2",
      href: "#",
      locked: true
    },
    {
      text: "Navigation title 3",
      href: "#",
      locked: false
    },
    {
      text: "Navigation title 4",
      href: "#",
      locked: true
    },
    {
      text: "Navigation title 5",
      href: "#",
      locked: false
    }
  ]
}) }}

Use this variation to show whether navigation items are locked.

The accepted lock values are:

true - shows a lock icon indicating the item is locked
false - no lock icon is displayed (default)

Icons must match the content on the page and be explained clearly. If a page shows a lock icon, it should also include text to explain why the page is locked.

In order for lock icons to display, the whole menu setting of showLocks must be set to true

Status and lock indicators

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Complete, unlocked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Complete, locked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg> </span
            ><span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              Unstarted, unlocked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              Unstarted, locked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg> </span
            ><span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              No status, unlocked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group"></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-6"
              role="presentation"
            >
              No status, locked
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg>
            </span></div
        ></a>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: true,
  showStatus: true,
  items: [
    {
      text: "Complete, unlocked",
      href: "#",
      locked: false,
      status: "complete"
    },
    {
      text: "Complete, locked",
      href: "#",
      locked: true,
      status: "complete"
    },
    {
      text: "Unstarted, unlocked",
      href: "#",
      locked: false,
      status: "unstarted"
    },
    {
      text: "Unstarted, locked",
      href: "#",
      locked: true,
      status: "unstarted"
    },
    {
      text: "No status, unlocked",
      href: "#",
      locked: false,
      status: "false"
    },
    {
      text: "No status, locked",
      href: "#",
      locked: true,
      status: "false"
    }
  ]
}) }}

Use this variation when you need to show both status and lock indicators. Combine status and lock states to give users complete information about item availability and progress.

In order for status icons to display, the whole menu settings of showStatus and showLocks must be set to true

Multi-level (tree structure)

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-1"
          data-toggle-target="#tel-lhs-nav-collapse-1"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 1
            </div>
          </div></a
        >
        <ul
          id="tel-lhs-nav-collapse-1"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-1"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-1-0"
              data-toggle-target="#tel-lhs-nav-collapse-1-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-1-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 1.1
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-1-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-1-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 1.1.1
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 1.1.2
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 1.2
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-2"
          data-toggle-target="#tel-lhs-nav-collapse-2"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 2
            </div>
          </div></a
        >
        <ul
          id="tel-lhs-nav-collapse-2"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-2"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 2.1
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-2-1"
              data-toggle-target="#tel-lhs-nav-collapse-2-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-2-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 2.2
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-2-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-2-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 2.2.1
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 2.2.2
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-3"
          data-toggle-target="#tel-lhs-nav-collapse-3"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 3
            </div>
          </div></a
        >
        <ul
          id="tel-lhs-nav-collapse-3"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-3"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-3-0"
              data-toggle-target="#tel-lhs-nav-collapse-3-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-3-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 3.1
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-3-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-3-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.1
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.2
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-3-1"
              data-toggle-target="#tel-lhs-nav-collapse-3-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-3-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 3.2
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-3-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-3-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.2.1
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-4"
          data-toggle-target="#tel-lhs-nav-collapse-4"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 4
            </div>
          </div></a
        >
        <ul
          id="tel-lhs-nav-collapse-4"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-4"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 4.1
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 4.2
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-5"
          data-toggle-target="#tel-lhs-nav-collapse-5"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 5
            </div>
          </div></a
        >
        <ul
          id="tel-lhs-nav-collapse-5"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-5"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-5-0"
              data-toggle-target="#tel-lhs-nav-collapse-5-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-5-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 5.1
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-5-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-5-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 5.1.1
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 5.2
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: false,
  showStatus: false,
  items: [
    {
      text: "Navigation section 1",
      href: "#",
      expanded: false,
      children: [
        {
          text: "Subsection 1.1",
          href: "#",
          expanded: false,
          children: [
            {
              text: "Navigation title 1.1.1",
              href: "#"
            },
            {
              text: "Navigation title 1.1.2",
              href: "#"
            }
          ]
        },
        {
          text: "Navigation title 1.2",
          href: "#"
        }
      ]
    },
    {
      text: "Navigation section 2",
      href: "#",
      expanded: false,
      children: [
        {
          text: "Navigation title 2.1",
          href: "#"
        },
        {
          text: "Subsection 2.2",
          href: "#",
          expanded: false,
          children: [
            {
              text: "Navigation title 2.2.1",
              href: "#"
            },
            {
              text: "Navigation title 2.2.2",
              href: "#"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 3",
      href: "#",
      expanded: false,
      children: [
        {
          text: "Subsection 3.1",
          href: "#",
          expanded: false,
          children: [
            {
              text: "Navigation title 3.1.1",
              href: "#"
            },
            {
              text: "Navigation title 3.1.2",
              href: "#"
            }
          ]
        },
        {
          text: "Subsection 3.2",
          href: "#",
          expanded: false,
          children: [
            {
              text: "Navigation title 3.2.1",
              href: "#"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 4",
      href: "#",
      expanded: false,
      children: [
        {
          text: "Navigation title 4.1",
          href: "#"
        },
        {
          text: "Navigation title 4.2",
          href: "#"
        }
      ]
    },
    {
      text: "Navigation section 5",
      href: "#",
      expanded: false,
      children: [
        {
          text: "Subsection 5.1",
          href: "#",
          expanded: false,
          children: [
            {
              text: "Navigation title 5.1.1",
              href: "#"
            }
          ]
        },
        {
          text: "Navigation title 5.2",
          href: "#"
        }
      ]
    }
  ]
}) }}

Use this variation for more complex navigation structures. The tree structure supports up to 3 levels of depth in a parent-child-grandchild relationship:

Level 1 (parent): Navigation items or top-level sections that can contain child items
Level 2 (child): Subsections or navigation items nested within parents
Level 3 (grandchild): Navigation items nested within child sections

The structure does not support further descendants beyond the grandchild's level. To show an expandable section as open, set expanded: true. Sections are collapsed by default. Use this variation for complex navigation structures such as course modules, document structures or multi-level site maps.

Multi-level tree with status and locks

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-1"
          data-toggle-target="#tel-lhs-nav-collapse-1"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 1
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-1"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-1"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-1-0"
              data-toggle-target="#tel-lhs-nav-collapse-1-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-1-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 1.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-1-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-1-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#1.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 1.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#1.1.2" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 1.1.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#1.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 1.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-2"
          data-toggle-target="#tel-lhs-nav-collapse-2"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 2
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-2"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-2"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#2.1" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 2.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-2-1"
              data-toggle-target="#tel-lhs-nav-collapse-2-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-2-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 2.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-2-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-2-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a
                  href="#2.2.1"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 2.2.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg> </span
                      ><span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a
                  href="#2.2.2"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 2.2.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-3"
          data-toggle-target="#tel-lhs-nav-collapse-3"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 3
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-3"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-3"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-3-0"
              data-toggle-target="#tel-lhs-nav-collapse-3-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-3-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 3.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-3-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-3-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#3.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a
                  href="#3.1.2"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg> </span
                      ><span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-3-1"
              data-toggle-target="#tel-lhs-nav-collapse-3-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-3-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 3.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-3-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-3-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#3.2.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.2.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-4"
          data-toggle-target="#tel-lhs-nav-collapse-4"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 4
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg> </span
            ><span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-4"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-4"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#4.1"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 4.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#4.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 4.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-5"
          data-toggle-target="#tel-lhs-nav-collapse-5"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 5
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-5"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-5"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-5-0"
              data-toggle-target="#tel-lhs-nav-collapse-5-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-5-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 5.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-5-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-5-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#5.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 5.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#5.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 5.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: true,
  showStatus: true,
  items: [
    {
      text: "Navigation section 1",
      href: "#1",
      expanded: false,
      locked: false,
      status: "complete",
      children: [
        {
          text: "Subsection 1.1",
          href: "#1.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 1.1.1",
              href: "#1.1.1",
              locked: false,
              status: "complete"
            },
            {
              text: "Navigation title 1.1.2",
              href: "#1.1.2",
              locked: false,
              status: "complete"
            }
          ]
        },
        {
          text: "Navigation title 1.2",
          href: "#1.2",
          locked: true,
          status: "unstarted"
        }
      ]
    },
    {
      text: "Navigation section 2",
      href: "#2",
      expanded: false,
      locked: false,
      status: "unstarted",
      children: [
        {
          text: "Navigation title 2.1",
          href: "#2.1",
          locked: false,
          status: "unstarted"
        },
        {
          text: "Subsection 2.2",
          href: "#2.2",
          expanded: false,
          locked: true,
          status: "unstarted",
          children: [
            {
              text: "Navigation title 2.2.1",
              href: "#2.2.1",
              locked: true,
              status: "unstarted"
            },
            {
              text: "Navigation title 2.2.2",
              href: "#2.2.2",
              locked: true,
              status: "false"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 3",
      href: "#3",
      expanded: false,
      locked: false,
      status: "complete",
      children: [
        {
          text: "Subsection 3.1",
          href: "#3.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 3.1.1",
              href: "#3.1.1",
              locked: false,
              status: "complete"
            },
            {
              text: "Navigation title 3.1.2",
              href: "#3.1.2",
              locked: true,
              status: "unstarted"
            }
          ]
        },
        {
          text: "Subsection 3.2",
          href: "#3.2",
          expanded: false,
          locked: false,
          status: "unstarted",
          children: [
            {
              text: "Navigation title 3.2.1",
              href: "#3.2.1",
              locked: false,
              status: "unstarted"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 4",
      href: "#4",
      expanded: false,
      locked: true,
      status: "unstarted",
      children: [
        {
          text: "Navigation title 4.1",
          href: "#4.1",
          locked: true,
          status: "unstarted"
        },
        {
          text: "Navigation title 4.2",
          href: "#4.2",
          locked: true,
          status: "false"
        }
      ]
    },
    {
      text: "Navigation section 5",
      href: "#5",
      expanded: false,
      locked: false,
      status: "unstarted",
      children: [
        {
          text: "Subsection 5.1",
          href: "#5.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 5.1.1",
              href: "#5.1.1",
              locked: false,
              status: "complete"
            }
          ]
        },
        {
          text: "Navigation title 5.2",
          href: "#5.2",
          locked: true,
          status: "unstarted"
        }
      ]
    }
  ]
}) }}

Use this variation to combine the hierarchical tree structure with status and lock indicators at any level. This is useful for complex workflows where you need to show progress and availability across multiple nested levels, such as step-by-step course modules or gated document sections.

In order for status icons to display, the whole menu settings of showStatus and showLocks must be set to "true"

Single level with active status

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#1" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Navigation title 1
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="true"
      >
        <a
          href="#2"
          class="tel-lhs-navigation__link tel-lhs-navigation__link--active"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Navigation title 2
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#3" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              Navigation title 3
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#4" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              Navigation title 4
            </div>
          </div></a
        >
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#5" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              Navigation title 5
            </div>
          </div></a
        >
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: false,
  showStatus: false,
  activeHref: "#2",
  items: [
    {
      text: "Navigation title 1",
      href: "#1"
    },
    {
      text: "Navigation title 2",
      href: "#2"
    },
    {
      text: "Navigation title 3",
      href: "#3"
    },
    {
      text: "Navigation title 4",
      href: "#4"
    },
    {
      text: "Navigation title 5",
      href: "#5"
    }
  ]
}) }}

Use this variation to highlight the current active link within a flat navigation menu. This helps users understand where they are within the navigation.

Multi-level tree with active status

Open this example in a new tab

HTML
Nunjucks

<nav
  class="tel-lhs-navigation"
  data-component="tel-lhs-navigation"
  data-module="tel-lhs-navigation"
>
  <button
    type="button"
    class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
    aria-controls="tel-lhs-nav-content"
    aria-expanded="false"
  >
    <span class="icon-wrapper" aria-hidden="true">
      <i class="icon fa fa-angle-double-right"></i>
    </span>
    <span class="tel-lhs-navigation__toggle-text">Open page menu</span>
  </button>

  <div class="tel-lhs-navigation__content">
    <button
      type="button"
      class="nhsuk-button nhsuk-button--secondary-solid tel-lhs-navigation__toggle"
      aria-controls="tel-lhs-nav-content"
      aria-expanded="false"
    >
      <span class="icon-wrapper" aria-hidden="true">
        <i class="icon fa fa-angle-double-left"></i>
      </span>
      <span class="tel-lhs-navigation__toggle-text">Close page menu</span>
    </button>
    <ul class="tel-lhs-navigation__tree" role="tree">
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#1" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-1"
              role="presentation"
            >
              Navigation title 1
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--"
              data-for="cm_completion"
              data-value="1"
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a href="#2" class="tel-lhs-navigation__link">
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-2"
              role="presentation"
            >
              Navigation title 2
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--"
              data-for="cm_completion"
              data-value="1"
            ></span></div
        ></a>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-3"
          data-toggle-target="#tel-lhs-nav-collapse-3"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-3"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 3
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-3"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-3"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-3-0"
              data-toggle-target="#tel-lhs-nav-collapse-3-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-3-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 3.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-3-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-3-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#3.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#3.1.2" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 3.1.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#3.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 3.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-4"
          data-toggle-target="#tel-lhs-nav-collapse-4"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-4"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 4
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-4"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-4"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a href="#4.1" class="tel-lhs-navigation__link">
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 4.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-4-1"
              data-toggle-target="#tel-lhs-nav-collapse-4-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-4-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 4.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-4-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-4-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a
                  href="#4.2.1"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 4.2.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg> </span
                      ><span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a
                  href="#4.2.2"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 4.2.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="true"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron"
          aria-expanded="true"
          aria-controls="tel-lhs-nav-collapse-5"
          data-toggle-target="#tel-lhs-nav-collapse-5"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-5"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 5
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Complete"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-5"
          class="tel-lhs-navigation__section-content"
          aria-labelledby="tel-lhs-nav-section-title-5"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron"
              aria-expanded="true"
              aria-controls="tel-lhs-nav-collapse-5-0"
              data-toggle-target="#tel-lhs-nav-collapse-5-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-5-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 5.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-5-0"
              class="tel-lhs-navigation__section-content"
              aria-labelledby="tel-lhs-nav-section-title-l1-5-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#5.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 5.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="true"
              >
                <a
                  href="#5.1.2"
                  class="tel-lhs-navigation__link tel-lhs-navigation__link--locked tel-lhs-navigation__link--active"
                >
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 5.1.2
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span class="tel-lhs-navigation__lock">
                        <svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Locked"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                          />
                        </svg> </span
                      ><span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-5-1"
              data-toggle-target="#tel-lhs-nav-collapse-5-1"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-5-l2-1"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 5.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-5-1"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-5-l2-1"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#5.2.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 5.2.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Unstarted"
                        >
                          <circle cx="9" cy="9" r="8.5" /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-6"
          data-toggle-target="#tel-lhs-nav-collapse-6"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-6"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 6
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span class="tel-lhs-navigation__lock">
              <svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Locked"
              >
                <rect
                  class="tel-lhs-navigation__icon-background"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <rect
                  class="tel-lhs-navigation__icon-border"
                  x="0.5"
                  y="0.5"
                  width="17"
                  height="17"
                  rx="8.5"
                />
                <path
                  class="tel-lhs-navigation__icon-symbol"
                  d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                />
              </svg> </span
            ><span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-6"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-6"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#6.1"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 6.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#6.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 6.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
      <li
        class="tel-lhs-navigation__item tel-lhs-navigation__section"
        data-id=""
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
      >
        <a
          href="#"
          class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
          aria-expanded="false"
          aria-controls="tel-lhs-nav-collapse-7"
          data-toggle-target="#tel-lhs-nav-collapse-7"
        >
          <div class="tel-lhs-navigation__left-group">
            <div
              class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
              id="tel-lhs-nav-section-title-7"
              role="presentation"
            >
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                aria-hidden="true"
              >
                <i
                  class="icon fa fa-chevron-right fa-fw"
                  aria-hidden="true"
                ></i>
              </span>
              <span
                class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                aria-hidden="true"
              >
                <i class="icon fa fa-chevron-down fa-fw" aria-hidden="true"></i>
              </span>
              Navigation section 7
            </div>
          </div>
          <div class="tel-lhs-navigation__right-group">
            <span
              class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
              data-for="cm_completion"
              data-value="1"
              ><svg
                class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Unstarted"
              >
                <circle cx="9" cy="9" r="8.5" /></svg
            ></span></div
        ></a>
        <ul
          id="tel-lhs-nav-collapse-7"
          class="tel-lhs-navigation__section-content collapsed"
          aria-labelledby="tel-lhs-nav-section-title-7"
          role="group"
        >
          <li
            class="tel-lhs-navigation__item tel-lhs-navigation__section"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <div class="tel-lhs-navigation__curve"></div>
            <a
              href="#"
              class="tel-lhs-navigation__link tel-lhs-navigation__chevron collapsed"
              aria-expanded="false"
              aria-controls="tel-lhs-nav-collapse-7-0"
              data-toggle-target="#tel-lhs-nav-collapse-7-0"
            >
              <div
                class="tel-lhs-navigation__title tel-lhs-navigation__section-title"
                id="tel-lhs-nav-section-title-l1-7-l2-0"
              >
                <div class="tel-lhs-navigation__left-group">
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--collapsed"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-right fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  <span
                    class="tel-lhs-navigation__chevron-icon tel-lhs-navigation__chevron-icon--expanded"
                    aria-hidden="true"
                  >
                    <i
                      class="icon fa fa-chevron-down fa-fw"
                      aria-hidden="true"
                    ></i>
                  </span>
                  Subsection 7.1
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Complete"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      /></svg
                  ></span>
                </div>
              </div>
            </a>
            <ul
              id="tel-lhs-nav-collapse-7-0"
              class="tel-lhs-navigation__section-content collapsed"
              aria-labelledby="tel-lhs-nav-section-title-l1-7-l2-0"
              role="group"
            >
              <li
                class="tel-lhs-navigation__item"
                data-id=""
                role="treeitem"
                aria-selected="false"
              >
                <a href="#7.1.1" class="tel-lhs-navigation__link">
                  <div class="tel-lhs-navigation__title">
                    <div class="tel-lhs-navigation__left-group">
                      Navigation title 7.1.1
                    </div>
                    <div class="tel-lhs-navigation__right-group">
                      <span
                        class="tel-lhs-navigation__status tel-lhs-navigation__status--complete"
                        data-for="cm_completion"
                        data-value="1"
                        ><svg
                          class="tel-lhs-navigation__icon tel-lhs-navigation__icon--complete"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          role="img"
                          aria-label="Complete"
                        >
                          <rect
                            class="tel-lhs-navigation__icon-background"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <rect
                            class="tel-lhs-navigation__icon-border"
                            x="0.5"
                            y="0.5"
                            width="17"
                            height="17"
                            rx="8.5"
                          />
                          <path
                            class="tel-lhs-navigation__icon-symbol"
                            d="M5.5625 9.25095L8.5625 11.7509L12.4375 6.24902"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          /></svg
                      ></span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <li
            class="tel-lhs-navigation__item"
            data-id=""
            role="treeitem"
            aria-selected="false"
          >
            <a
              href="#7.2"
              class="tel-lhs-navigation__link tel-lhs-navigation__link--locked"
            >
              <div class="tel-lhs-navigation__title">
                <div class="tel-lhs-navigation__left-group">
                  Navigation title 7.2
                </div>
                <div class="tel-lhs-navigation__right-group">
                  <span class="tel-lhs-navigation__lock">
                    <svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--lock"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Locked"
                    >
                      <rect
                        class="tel-lhs-navigation__icon-background"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <rect
                        class="tel-lhs-navigation__icon-border"
                        x="0.5"
                        y="0.5"
                        width="17"
                        height="17"
                        rx="8.5"
                      />
                      <path
                        class="tel-lhs-navigation__icon-symbol"
                        d="M7.57143 7.03125V7.875H10.4286V7.03125C10.4286 6.2543 9.78929 5.625 9 5.625C8.21071 5.625 7.57143 6.2543 7.57143 7.03125ZM6.42857 7.875V7.03125C6.42857 5.63379 7.58036 4.5 9 4.5C10.4196 4.5 11.5714 5.63379 11.5714 7.03125V7.875H11.8571C12.4875 7.875 13 8.37949 13 9V12.375C13 12.9955 12.4875 13.5 11.8571 13.5H6.14286C5.5125 13.5 5 12.9955 5 12.375V9C5 8.37949 5.5125 7.875 6.14286 7.875H6.42857Z"
                      />
                    </svg> </span
                  ><span
                    class="tel-lhs-navigation__status tel-lhs-navigation__status--unstarted"
                    data-for="cm_completion"
                    data-value="1"
                    ><svg
                      class="tel-lhs-navigation__icon tel-lhs-navigation__icon--unstarted"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      role="img"
                      aria-label="Unstarted"
                    >
                      <circle cx="9" cy="9" r="8.5" /></svg
                  ></span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/lhs-navigation/macro.njk' import telLhsNavigation %}

{{ telLhsNavigation({
  showLocks: true,
  showStatus: true,
  activeHref: "#5.1.2",
  items: [
    {
      text: "Navigation title 1",
      href: "#1"
    },
    {
      text: "Navigation title 2",
      href: "#2"
    },
    {
      text: "Navigation section 3",
      href: "#3",
      expanded: false,
      locked: false,
      status: "complete",
      children: [
        {
          text: "Subsection 3.1",
          href: "#3.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 3.1.1",
              href: "#3.1.1",
              locked: false,
              status: "complete"
            },
            {
              text: "Navigation title 3.1.2",
              href: "#3.1.2",
              locked: false,
              status: "complete"
            }
          ]
        },
        {
          text: "Navigation title 3.2",
          href: "#3.2",
          locked: true,
          status: "unstarted"
        }
      ]
    },
    {
      text: "Navigation section 4",
      href: "#4",
      expanded: false,
      locked: false,
      status: "unstarted",
      children: [
        {
          text: "Navigation title 4.1",
          href: "#4.1",
          locked: false,
          status: "unstarted"
        },
        {
          text: "Subsection 4.2",
          href: "#4.2",
          expanded: false,
          locked: true,
          status: "unstarted",
          children: [
            {
              text: "Navigation title 4.2.1",
              href: "#4.2.1",
              locked: true,
              status: "unstarted"
            },
            {
              text: "Navigation title 4.2.2",
              href: "#4.2.2",
              locked: true,
              status: "false"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 5",
      href: "#5",
      expanded: false,
      locked: false,
      status: "complete",
      children: [
        {
          text: "Subsection 5.1",
          href: "#5.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 5.1.1",
              href: "#5.1.1",
              locked: false,
              status: "complete"
            },
            {
              text: "Navigation title 5.1.2",
              href: "#5.1.2",
              locked: true,
              status: "unstarted"
            }
          ]
        },
        {
          text: "Subsection 5.2",
          href: "#5.2",
          expanded: false,
          locked: false,
          status: "unstarted",
          children: [
            {
              text: "Navigation title 5.2.1",
              href: "#5.2.1",
              locked: false,
              status: "unstarted"
            }
          ]
        }
      ]
    },
    {
      text: "Navigation section 6",
      href: "#6",
      expanded: false,
      locked: true,
      status: "unstarted",
      children: [
        {
          text: "Navigation title 6.1",
          href: "#6.1",
          locked: true,
          status: "unstarted"
        },
        {
          text: "Navigation title 6.2",
          href: "#6.2",
          locked: true,
          status: "false"
        }
      ]
    },
    {
      text: "Navigation section 7",
      href: "#7",
      expanded: false,
      locked: false,
      status: "unstarted",
      children: [
        {
          text: "Subsection 7.1",
          href: "#7.1",
          expanded: false,
          locked: false,
          status: "complete",
          children: [
            {
              text: "Navigation title 7.1.1",
              href: "#7.1.1",
              locked: false,
              status: "complete"
            }
          ]
        },
        {
          text: "Navigation title 7.2",
          href: "#7.2",
          locked: true,
          status: "unstarted"
        }
      ]
    }
  ]
}) }}

Use this variation to show the active link within a multi-level navigation structure. When an active link is set, parent sections open automatically so users can see their current location in the navigation.

Content guidance

Navigation labels should be short, clear and easy to scan.

Page titles should work within the available space on desktop. Ideally, labels should not wrap across multiple lines or break words.

Use labels that:

match the page title where possible
describe the destination clearly
are short enough to scan quickly
use plain English
avoid internal terminology
make sense out of context

For pages with long titles, consider whether a shorter navigation label is needed. This should only be used where the shorter label remains clear and accurately describes the page.

Avoid using multiple labels that are too similar, as this can make it harder for users to understand the difference between pages.

Research evidence

What has been seen so far

Initial research has been carried out on a previous implementation of the left-hand navigation. The previous implementation included mobile-responsive behaviour but was limited to 1 level.

Users responded well to this navigation pattern. They understood how to interact with it and found navigation links.

Research methods included:

click testing
survey questions

We have some evidence that users understand and can use left-hand navigation, including its mobile state.

More research is needed before this component can be considered stable. Further testing should explore:

how users understand deeper navigation levels
whether users notice and understand the current page highlight
how well the component works for course-based information
how well it supports learning progress
whether the mobile fly-out works across different page types
whether users understand the relationship between the parent page and nested navigation items

Confidence level

Low to medium

Left-hand side navigation

Summary

When to use

When not to use

How it works

Configuration

Expanded sections

Whole menu properties

Item properties

Example/s, variants and states including code and design assets

Status indicators

Lock indicators

Status and lock indicators

Multi-level (tree structure)

Multi-level tree with status and locks

Single level with active status

Multi-level tree with active status

Content guidance

Research evidence

What has been seen so far

Confidence level