Alpha

This is an alpha release of our documentation site. View the roadmap.

On this page

On this page

Examples

With columns

By default the on this page component will display using a column based layout collapsing to a single column on small screens.

Open example in a new tab

On this page

<div class="cads-on-this-page cads-on-this-page--columns" data-testid="on-this-page">
  <h2 class="cads-on-this-page__title">On this page</h2>
  <ul class="cads-on-this-page__list">
    <li class="cads-on-this-page__list-item">
      <a href="#link-1"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 1
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-2"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 2
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-3"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 3
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-4"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 4
      </a>
    </li>
  </ul>
</div>
<%= render CitizensAdviceComponents::OnThisPage.new do |c|
  c.with_links([
    { label: "Link 1", id: "link-1" },
    { label: "Link 2", id: "link-2" },
    { label: "Link 3", id: "link-3" },
    { label: "Link 4", id: "link-4" }
  ])
end %>

With no columns

If there are fewer than four link then the component will always display in a single column.

Open example in a new tab

On this page

<div class="cads-on-this-page" data-testid="on-this-page">
  <h2 class="cads-on-this-page__title">On this page</h2>
  <ul class="cads-on-this-page__list">
    <li class="cads-on-this-page__list-item">
      <a href="#link-1"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 1
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-2"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 2
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-3"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 3
      </a>
    </li>
  </ul>
</div>
<%= render CitizensAdviceComponents::OnThisPage.new do |c|
  c.with_links([
    { label: "Link 1", id: "link-1" },
    { label: "Link 2", id: "link-2" },
    { label: "Link 3", id: "link-3" }
  ])
end %>

The component supports a variant with nested links. In this configuration the component is always displayed in a single column with the option to expand nested links.

Open example in a new tab

On this page

<div class="cads-on-this-page js-cads-on-this-page cads-on-this-page--expandable" data-testid="on-this-page">
  <h2 class="cads-on-this-page__title">On this page</h2>
  <ul class="cads-on-this-page__list">
    <li class="cads-on-this-page__list-item">
      <a href="#link-1"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 1
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <button type="button"
            class="cads-on-this-page__show cads-icon_plus cads-linkbutton js-cads-on-this-page__toggle"
            aria-expanded="false"
            data-testid="on-this-page-toggle"
            data-toggle-target-id="link-2-list"
            data-label-when-hiding="Show sub-headings for Link 2"
            data-label-when-showing="Hide sub-headings for Link 2"></button>
      <a href="#link-2"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 2
      </a>
      <ul class="cads-on-this-page__list cads-on-this-page__list--nested"
            id="link-2-list"
            data-testid="on-this-page-children">
        <li class="cads-on-this-page__list-item">
          <a href="#link-2-1"
                  class="cads-on-this-page__link cads-hyperlink"
                  data-testid="on-this-page-child-link">
            Link 2.1
          </a>
        </li>
        <li class="cads-on-this-page__list-item">
          <a href="#link-2-2"
                  class="cads-on-this-page__link cads-hyperlink"
                  data-testid="on-this-page-child-link">
            Link 2.2
          </a>
        </li>
      </ul>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-3"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 3
      </a>
    </li>
    <li class="cads-on-this-page__list-item">
      <button type="button"
            class="cads-on-this-page__show cads-icon_plus cads-linkbutton js-cads-on-this-page__toggle"
            aria-expanded="false"
            data-testid="on-this-page-toggle"
            data-toggle-target-id="link-4-list"
            data-label-when-hiding="Show sub-headings for Link 4"
            data-label-when-showing="Hide sub-headings for Link 4"></button>
      <a href="#link-4"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 4
      </a>
      <ul class="cads-on-this-page__list cads-on-this-page__list--nested"
            id="link-4-list"
            data-testid="on-this-page-children">
        <li class="cads-on-this-page__list-item">
          <a href="#link-4-1"
                  class="cads-on-this-page__link cads-hyperlink"
                  data-testid="on-this-page-child-link">
            Link 4.1
          </a>
        </li>
      </ul>
    </li>
    <li class="cads-on-this-page__list-item">
      <a href="#link-5"
          class="cads-on-this-page__link cads-hyperlink"
          data-testid="on-this-page-link">
        Link 5
      </a>
    </li>
  </ul>
</div>
<%= render CitizensAdviceComponents::OnThisPage.new(show_nested_links: true) do |c|
  c.with_links([
    { label: "Link 1", id: "link-1" },
    { label: "Link 2", id: "link-2", children: [
      { label: "Link 2.1", id: "link-2-1" },
      { label: "Link 2.2", id: "link-2-2" }
    ] },
    { label: "Link 3", id: "link-3" },
    { label: "Link 4", id: "link-4", children: [
      { label: "Link 4.1", id: "link-4-1" }
    ] },
    { label: "Link 5", id: "link-5" }
  ])
end %>

JavaScript behaviour

On this page requires some additional JavaScript behaviour which can be initialised with:

import { initOnThisPage } from '@citizensadvice/design-system';
initOnThisPage();

The JavaScript behaviour is only required if you are using the version of the component with nested links. If you are not using this you don’t need to include this code.

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

Component arguments

Argument Description
Argument show_nested_links Description Optional, will display nested links if there are any. Defaults to false

The on this page component accepts a required links slot. Links are an array of the following options:

Argument Description
Argument id Description Required, used for linking content on the page, and for accessibility purposes
Argument label Description Required, the label of the link
Argument children Description Optional, array for nested links