Alpha

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

Navigation

On this page

Open example in a new tab 
<div class="cads-navigation-full-width-wrapper">
  <nav id="cads-navigation" class="cads-navigation js-cads-greedy-nav">
    <ul class="cads-navigation__list">
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/benefits/">Benefits</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/work/">Work</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/debt-and-money/">Debt and money</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/consumer/">Consumer</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/housing/">Housing</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/family/">Family</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/law-and-courts/">Law and courts</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/immigration/">Immigration</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/health/">Health</a>
      </li>
      <li class="cads-navigation__list-item">
        <a class="cads-navigation__link" href="/more">More from us</a>
      </li>
    </ul>
  </nav>
</div>
<%= render CitizensAdviceComponents::Navigation.new(
  links: [
    { url: "/benefits/", title: "Benefits" },
    { url: "/work/", title: "Work" },
    { url: "/debt-and-money/", title: "Debt and money" },
    { url: "/consumer/", title: "Consumer" },
    { url: "/housing/", title: "Housing" },
    { url: "/family/", title: "Family" },
    { url: "/law-and-courts/", title: "Law and courts" },
    { url: "/immigration/", title: "Immigration" },
    { url: "/health/", title: "Health" },
    { url: "/more", title: "More from us" }
  ]
) %>

The navigation is intended to be used alongside the header, although it works standalone, see the header component docs for details on how to use the header component.

JavaScript behaviour

The global navigation uses a “greedy” navigation pattern to allow as many links to be visible as possible. As the width of the viewport is restricted, navigation links fall into a collapsible section.

On mobile devices, any links that appear in the .js-cads-copy-into-nav element in the header are copied into the collapsible more section too.

If you plan to use this component you will need to initialise the following JavaScript:

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

Using with Rails

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

<%= render CitizensAdviceComponents::Navigation.new(
  links: [
    { url: "/benefits/", title: "Benefits" },
    { url: "/work/", title: "Work" },
    { url: "/debt-and-money/", title: "Debt and money" },
    { url: "/consumer/", title: "Consumer" },
    { url: "/housing/", title: "Housing" },
    { url: "/family/", title: "Family" },
    { url: "/law-and-courts/", title: "Law and courts" },
    { url: "/immigration/", title: "Immigration" },
    { url: "/health/", title: "Health" },
    { url: "/more", title: "More from us" }
  ]
) %>

Component arguments

Argument Description
Argument links Description Required, an array of hashes, each with the following:
Argument link[:url] Description → Required, url for the link
Argument link[:title] Description → Required, title for the link