Alpha

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

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="/immigration#h-applying-to-the-eu-settlement-scheme">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="/immigration/preparing-to-apply-for-pre-settled-and-settled-status">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="/immigration/applying-for-settled-status">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="/immigration/viewing-your-pre-settled-or-settled-status">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="/immigration/switching-from-pre-settled-to-settled-status">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="/immigration/problems-with-your-settled-status-decision">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: "/immigration#h-applying-to-the-eu-settlement-scheme") do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "/immigration/preparing-to-apply-for-pre-settled-and-settled-status" },
    { title: "Applying for pre-settled and settled status", url: "/immigration/applying-for-settled-status" },
    { title: "Updating and proving your pre-settled or settled status", url: "/immigration/viewing-your-pre-settled-or-settled-status" },
    { title: "Switching from pre-settled to settled status", url: "/immigration/switching-from-pre-settled-to-settled-status" },
    { title: "Problems with your settled status decision", url: "/immigration/problems-with-your-settled-status-decision" }
  ])
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="/immigration#h-applying-to-the-eu-settlement-scheme">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="/immigration/preparing-to-apply-for-pre-settled-and-settled-status">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="/immigration/applying-for-settled-status">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="/immigration/viewing-your-pre-settled-or-settled-status">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="/immigration/switching-from-pre-settled-to-settled-status">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="/immigration/problems-with-your-settled-status-decision">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: "/immigration#h-applying-to-the-eu-settlement-scheme") do |c| %>
  <% c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "/immigration/preparing-to-apply-for-pre-settled-and-settled-status" },
    { title: "Applying for pre-settled and settled status", url: "/immigration/applying-for-settled-status" },
    { title: "Updating and proving your pre-settled or settled status", url: "/immigration/viewing-your-pre-settled-or-settled-status" },
    { title: "Switching from pre-settled to settled status", url: "/immigration/switching-from-pre-settled-to-settled-status" },
    { title: "Problems with your settled status decision", url: "/immigration/problems-with-your-settled-status-decision" }
  ]) %>
  <% 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="/immigration#h-applying-to-the-eu-settlement-scheme">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" aria-current="page" href="/immigration/preparing-to-apply-for-pre-settled-and-settled-status">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="/immigration/applying-for-settled-status">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="/immigration/viewing-your-pre-settled-or-settled-status">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="/immigration/switching-from-pre-settled-to-settled-status">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="/immigration/problems-with-your-settled-status-decision">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: "/immigration#h-applying-to-the-eu-settlement-scheme") do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "/immigration/preparing-to-apply-for-pre-settled-and-settled-status", "aria-current": "page" },
    { title: "Applying for pre-settled and settled status", url: "/immigration/applying-for-settled-status" },
    { title: "Updating and proving your pre-settled or settled status", url: "/immigration/viewing-your-pre-settled-or-settled-status" },
    { title: "Switching from pre-settled to settled status", url: "/immigration/switching-from-pre-settled-to-settled-status" },
    { title: "Problems with your settled status decision", url: "/immigration/problems-with-your-settled-status-decision" }
  ])
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: "/immigration#h-applying-to-the-eu-settlement-scheme") do |c|
  c.with_section_links([
    { title: "Preparing to apply for pre-settled and settled status", url: "/immigration/preparing-to-apply-for-pre-settled-and-settled-status" },
    { title: "Applying for pre-settled and settled status", url: "/immigration/applying-for-settled-status" },
    { title: "Updating and proving your pre-settled or settled status", url: "/immigration/viewing-your-pre-settled-or-settled-status" },
    { title: "Switching from pre-settled to settled status", url: "/immigration/switching-from-pre-settled-to-settled-status" },
    { title: "Problems with your settled status decision", url: "/immigration/problems-with-your-settled-status-decision" }
  ])
end %>

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:

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.