@citizensadvice/cads-section-nav

Component

Usage no npm install needed!

<script type="module">
  import citizensadviceCadsSectionNav from 'https://cdn.skypack.dev/@citizensadvice/cads-section-nav';
</script>

README

Section navigation

npm (scoped)

Component type

  • Component

Dependencies:

Name Description
@citizensadvice/cads-support System-wide global variables and functions

Installation

$ npm install @citizensadvice/cads-section-nav
@import "@citizensadvice/cads-section-nav/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-section-nav@latest/build/cads.section-nav.css" />

Implementation

This component is used to navigate pages within the same section. The pages should be hierarchical in structure. The pages should be siblings of a parent.

When creating links in a section navigation

  • use sentence case
  • be concise
  • do not use a long sentence
  • don’t underline links
  • use the active state to show users which page they have navigated to

The parent title of the collection of pages should be placed at the top of the component.

<ul class="o-list o-list--flat-recursive c-section-nav">
  <li class="c-section-nav__before">In this section</li>
  <li class="c-section-nav__section">
    <span class="c-section-nav__section-heading"
      >Something's wrong with a purchase</span
    >
    <ul class="c-section-nav__section-items">
      <li
        class="c-section-nav__section-item c-section-nav__section-item--active"
      >
        <a href="#">Link to current page visited</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A link to a page</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A much much much longer link to another page</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A link to a page</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A link to a page</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A link to a page</a>
      </li>
      <li class="c-section-nav__section-item">
        <a href="#">A link to a page</a>
      </li>
    </ul>
  </li>
</ul>

Accessibility

  • Ensure the section navigation is keyboard accessible. Users should be able to tab through each link
  • Ensure a focus state is visible