Section links

On this page

Examples

Default

Open example in a new tab 
<aside class="cads-section-links">
  <div class="cads-section-links__content">
    <h2 class="cads-section-links__title">Related Content</h2>
    <nav aria-label="Applying to the EU settlement scheme">
      <ul class="cads-section-links__links">
        <li>
          <h3 class="cads-section-links__section-title">
            <a data-testid="section-title-link" href="#">Applying to the EU settlement scheme</a>
          </h3>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Preparing to apply for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Applying for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Updating and proving your pre-settled or settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Switching from pre-settled to settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Problems with your settled status decision</a>
        </li>
      </ul>
    </nav>
  </div>
</aside>

<%= render CitizensAdviceComponents::SectionLinks.new(
  title: "Related Content",
  section_title: "Applying to the EU settlement scheme",
  section_title_url: "#"
) do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "#" },
    { title: "Applying for pre-settled and settled status", url: "#" },
    { title: "Updating and proving your pre-settled or settled status", url: "#" },
    { title: "Switching from pre-settled to settled status", url: "#" },
    { title: "Problems with your settled status decision", url: "#" }
  ])
end %>

With custom content

Open example in a new tab 
<aside class="cads-section-links">
  <div class="cads-section-links__content">
    <h2 class="cads-section-links__title">Related Content</h2>
    <nav aria-label="Applying to the EU settlement scheme">
      <ul class="cads-section-links__links">
        <li>
          <h3 class="cads-section-links__section-title">
            <a data-testid="section-title-link" href="#">Applying to the EU settlement scheme</a>
          </h3>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Preparing to apply for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Applying for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Updating and proving your pre-settled or settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Switching from pre-settled to settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Problems with your settled status decision</a>
        </li>
      </ul>
      <div class="section-links-example-custom-content">
        Custom content
      </div>
    </nav>
  </div>
</aside>

<%= render CitizensAdviceComponents::SectionLinks.new(
  title: "Related Content",
  section_title: "Applying to the EU settlement scheme",
  section_title_url: "#"
) do |c| %>
  <% c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "#" },
    { title: "Applying for pre-settled and settled status", url: "#" },
    { title: "Updating and proving your pre-settled or settled status", url: "#" },
    { title: "Switching from pre-settled to settled status", url: "#" },
    { title: "Problems with your settled status decision", url: "#" }
  ]) %>
  <% c.with_custom_content do %>
    <div class="section-links-example-custom-content">
      Custom content
    </div>
  <% end %>
<% end %>

With additional attributes

Any additional key/value pairs (beyond title and url) in your section link definition will be added to the link (eg "aria-current":"page").

Open example in a new tab 
<aside class="cads-section-links">
  <div class="cads-section-links__content">
    <h2 class="cads-section-links__title">Related Content</h2>
    <nav aria-label="Applying to the EU settlement scheme">
      <ul class="cads-section-links__links">
        <li>
          <h3 class="cads-section-links__section-title">
            <a data-testid="section-title-link" href="#">Applying to the EU settlement scheme</a>
          </h3>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Preparing to apply for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Applying for pre-settled and settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Updating and proving your pre-settled or settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Switching from pre-settled to settled status</a>
        </li>
        <li class="cads-section-links__item">
          <a class="cads-hyperlink cads-section-links__link" data-testid="section-links-link" href="#">Problems with your settled status decision</a>
        </li>
      </ul>
    </nav>
  </div>
</aside>

<%= render CitizensAdviceComponents::SectionLinks.new(
  title: "Related Content",
  section_title: "Applying to the EU settlement scheme",
  section_title_url: "#"
) do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "#" },
    { title: "Applying for pre-settled and settled status", url: "#" },
    { title: "Updating and proving your pre-settled or settled status", url: "#" },
    { title: "Switching from pre-settled to settled status", url: "#" },
    { title: "Problems with your settled status decision", url: "#" }
  ])
end %>

Using with Rails

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

<%= render CitizensAdviceComponents::SectionLinks.new(
  title: "Related Content",
  section_title: "Applying to the EU settlement scheme",
  section_title_url: "#"
) do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "#" },
    { title: "Applying for pre-settled and settled status", url: "#" },
    { title: "Updating and proving your pre-settled or settled status", url: "#" },
    { title: "Switching from pre-settled to settled status", url: "#" },
    { title: "Problems with your settled status decision", url: "#" }
  ])
end %>

Component arguments

Component arguments
Argument Description
Argument title Description Required. A general title for the section links
Argument section_title Description Required. A section title above the links
Argument section_title_url Description Optional. A link for the section title

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

Component arguments
Argument Description
Argument url Description Required, url for the section link
Argument title Description Required, title for the section link

Custom content

The component accepts a custom_content slot for additional content such as adviser only links. Please note that content will be rendered into a nav element which accepts flow content elements.