Components

Scrollable pane

Status: Official

Updated in October 2026.

How to use ‘official’ components

You can use ‘official’ components in every product phase. They're fully accessible, and will be supported and maintained in the long term. Read about all the Design System statuses.

Use the scrollable pane component for content, usually a table, which unavoidably overflows the page.

Overview
How to use
Get help and contribute

Open this example in a new window

HTML (Sortable table (example))
Nunjucks (Sortable table (example))

<div class="moj-scrollable-pane" role="region" tabindex="0" aria-label="HMCTS management information">
  <table class="govuk-table">
    <caption class="govuk-table__caption">HMCTS management information, July to October 2025</caption>
    <thead class="govuk-table__head">
      <tr class="govuk-table__row">
        <th scope="col" class="govuk-table__header">Month</th>
        <th scope="col" class="govuk-table__header">Civil claims received</th>
        <th scope="col" class="govuk-table__header">Civil defences</th>
        <th scope="col" class="govuk-table__header">Small claims referred to mediation</th>
        <th scope="col" class="govuk-table__header">Small claims mediations</th>
        <th scope="col" class="govuk-table__header">Small claims settled</th>
        <th scope="col" class="govuk-table__header">Small claims settled at mediation (%)</th>
        <th scope="col" class="govuk-table__header">Private family law receipts</th>
        <th scope="col" class="govuk-table__header">Private family law disposals</th>
        <th scope="col" class="govuk-table__header">Private family law open caseload</th>
        <th scope="col" class="govuk-table__header">Public family law receipts</th>
        <th scope="col" class="govuk-table__header">Public family law disposals</th>
        <th scope="col" class="govuk-table__header">Public family law open caseload</th>
      </tr>
    </thead>
    <tbody class="govuk-table__body">
      <tr class="govuk-table__row">
        <td class="govuk-table__cell">July 2025</td>
        <td class="govuk-table__cell">180271</td>
        <td class="govuk-table__cell">26217</td>
        <td class="govuk-table__cell">7683</td>
        <td class="govuk-table__cell">5339</td>
        <td class="govuk-table__cell">1585</td>
        <td class="govuk-table__cell">29.7</td>
        <td class="govuk-table__cell">5251</td>
        <td class="govuk-table__cell">4382</td>
        <td class="govuk-table__cell">36631</td>
        <td class="govuk-table__cell">1588</td>
        <td class="govuk-table__cell">1468</td>
        <td class="govuk-table__cell">10021</td>
      </tr>
      <tr class="govuk-table__row">
        <td class="govuk-table__cell">August 2025</td>
        <td class="govuk-table__cell">145848</td>
        <td class="govuk-table__cell">24945</td>
        <td class="govuk-table__cell">6580</td>
        <td class="govuk-table__cell">4579</td>
        <td class="govuk-table__cell">1433</td>
        <td class="govuk-table__cell">31.3</td>
        <td class="govuk-table__cell">4612</td>
        <td class="govuk-table__cell">3609</td>
        <td class="govuk-table__cell">36922</td>
        <td class="govuk-table__cell">1273</td>
        <td class="govuk-table__cell">1186</td>
        <td class="govuk-table__cell">10105</td>
      </tr>
      <tr class="govuk-table__row">
        <td class="govuk-table__cell">September 2025</td>
        <td class="govuk-table__cell">150357</td>
        <td class="govuk-table__cell">23587</td>
        <td class="govuk-table__cell">8936</td>
        <td class="govuk-table__cell">5617</td>
        <td class="govuk-table__cell">1691</td>
        <td class="govuk-table__cell">30.1</td>
        <td class="govuk-table__cell">5289</td>
        <td class="govuk-table__cell">3986</td>
        <td class="govuk-table__cell">37374</td>
        <td class="govuk-table__cell">1286</td>
        <td class="govuk-table__cell">1382</td>
        <td class="govuk-table__cell">10004</td>
      </tr>
      <tr class="govuk-table__row">
        <td class="govuk-table__cell">October 2025</td>
        <td class="govuk-table__cell">162618</td>
        <td class="govuk-table__cell">23366</td>
        <td class="govuk-table__cell">10662</td>
        <td class="govuk-table__cell">6201</td>
        <td class="govuk-table__cell">1731</td>
        <td class="govuk-table__cell">27.9</td>
        <td class="govuk-table__cell">5219</td>
        <td class="govuk-table__cell">4118</td>
        <td class="govuk-table__cell">37770</td>
        <td class="govuk-table__cell">1500</td>
        <td class="govuk-table__cell">1397</td>
        <td class="govuk-table__cell">10064</td>
      </tr>
    </tbody>
  </table>
</div>

Nunjucks macro options

Name	Type	Required	Description
label	string	Yes	The text used as the `aria-label` for the pane.
labelledBy	string	Yes	An id reference to be used in the `aria-labelledby` attribute. If you set `label`, this option is not required and is ignored.
classes	string	No	Extra classes to add to the `div` container.
attributes	object	No	HTML attributes (for example data attributes) to add to the `div` container.
html	string	Yes	HTML content for the pane. If a Nunjucks call block is provided, it takes precedence over this option.
caller	nunjucks-block	No	Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a call block.

{%- from "moj/components/scrollable-pane/macro.njk" import mojScrollablePane -%}
{%- from "docs/components/scrollable-pane/examples/default/table.njk" import tableHTML -%}

{% call mojScrollablePane({ label: "HMCTS management information" }) -%}
  {{ tableHTML() }}
{% endcall -%}

Use the scrollable pane component for content that is unavoidably overflowing on the page.

It allows users to scroll horizontally to view content that is wider than the visible area. Shadows at the edges signal that there’s more content.

When to use

It is usually used in the:

filter a list pattern – because the filter takes up additional horizontal space, causing the pane holding the table to shrink
sortable table component

When not to use

Ideally users should be able to see all the page content without needing to scroll. Only use this component if you’re unable to make the content fit into the page.

Adding an accessible name

Give the container an accessible name by adding a label or labelledBy attribute. Doing this will:

identify it as a region to screen readers
add the container to the keyboard tab order, allowing keyboard users to focus on the pane and use the arrow keys to scroll through its content

Changing the background colour

This component works best on a white background.

If you need to, you can change the component’s background colour by setting the --moj-scrollable-pane-background-colourcustom property in your CSS or by using a style attribute on the element.

<div class="moj-scrollable-pane" style="--moj-scrollable-pane-background-colour: #f4f8fb;" role="region" tabindex="0" aria-label="Establishments">
 [pane content]
</div>

Get help and contribute

Get help

You can contact the MOJ Design System team for help or support using this component.

Help improve this component

The MOJ Design System team would like to hear:

how you have used this component in your service
any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the scrollable pane discussion on GitHub.

Cookies on MOJ Design System