Contents panel

New

Default

Show code

<nav class="contents-panel" aria-labelledby="contents-panel-heading">
  <h2 class="govuk-visually-hidden" id="contents-panel-heading">Pages in this section</h2>
  <h3 class="contents-panel__list-heading">Getting started</h3>
  <ul class="contents-panel__list">
    <li class="contents-panel__list-item">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#">Overview</a>
    </li>
    <li class="contents-panel__list-item contents-panel__list-item--current">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#" aria-current="page">Before you start</a>
    </li>
    <li class="contents-panel__list-item">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#">What you'll need</a>
    </li>
  </ul>
  <h3 class="contents-panel__list-heading">Making an application</h3>
  <ul class="contents-panel__list">
    <li class="contents-panel__list-item">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#">Complete the form</a>
    </li>
    <li class="contents-panel__list-item">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#">Pay the fee</a>
    </li>
    <li class="contents-panel__list-item">
      <a class="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="#">After you apply</a>
    </li>
  </ul>
</nav>

---
import {
  ContentsPanel,
  ContentsPanelListHeading,
  ContentsPanelList,
  ContentsPanelItem,
} from "@i-dot-ai-npm/component-library-astro";
---

<ContentsPanel>
  <ContentsPanelListHeading>Getting started</ContentsPanelListHeading>
  <ContentsPanelList>
    <ContentsPanelItem href="#">Overview</ContentsPanelItem>
    <ContentsPanelItem href="#" current>Before you start</ContentsPanelItem>
    <ContentsPanelItem href="#">What you'll need</ContentsPanelItem>
  </ContentsPanelList>
  <ContentsPanelListHeading>Making an application</ContentsPanelListHeading>
  <ContentsPanelList>
    <ContentsPanelItem href="#">Complete the form</ContentsPanelItem>
    <ContentsPanelItem href="#">Pay the fee</ContentsPanelItem>
    <ContentsPanelItem href="#">After you apply</ContentsPanelItem>
  </ContentsPanelList>
</ContentsPanel>

import {
  ContentsPanel,
  ContentsPanelListHeading,
  ContentsPanelList,
  ContentsPanelItem,
} from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ContentsPanel>
      <ContentsPanelListHeading>Getting started</ContentsPanelListHeading>
      <ContentsPanelList>
        <ContentsPanelItem href="#">Overview</ContentsPanelItem>
        <ContentsPanelItem href="#" current>
          Before you start
        </ContentsPanelItem>
        <ContentsPanelItem href="#">What you'll need</ContentsPanelItem>
      </ContentsPanelList>
      <ContentsPanelListHeading>Making an application</ContentsPanelListHeading>
      <ContentsPanelList>
        <ContentsPanelItem href="#">Complete the form</ContentsPanelItem>
        <ContentsPanelItem href="#">Pay the fee</ContentsPanelItem>
        <ContentsPanelItem href="#">After you apply</ContentsPanelItem>
      </ContentsPanelList>
    </ContentsPanel>
  );
}

When to use this component

Use the contents panel on content-heavy pages that are split across many pages, such as a multi-page user guide, so users can see the pages in a section and move between them.

It works best as a persistent side navigation on public-facing content pages where readers need to orient themselves within a longer body of content and jump directly to the page they need.

When not to use this component

Do not use the contents panel for short content that fits comfortably on a single page — the extra navigation adds noise without helping the user.

Do not use it to navigate between the top-level sections of a service. Use the Service navigation component for that instead.

How it works

The contents panel is a <nav> landmark with a visually hidden heading, so assistive technology announces it as a navigation region.

Inside it, list the pages as links. Optionally group them under one or more list headings. Mark the page the user is currently on with the current modifier, which draws a left-hand indicator and sets aria-current="page" on the link so it is announced to screen readers.