Navigation
On this page
<div class="cads-navigation-full-width-wrapper">
<nav
id="cads-navigation"
class="cads-navigation js-cads-greedy-nav"
data-dropdown-label="More"
data-dropdown-label-close="Close"
data-dropdown-aria-label="More navigation items"
data-dropdown-aria-label-close="Close navigation">
<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 header links section in the header are copied into the navigation too.
If you plan to use this component you will need to initialise the following JavaScript:
import { initNavigation } from '@citizensadvice/design-system';
initNavigation();
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 |
Questions and contributions
For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.