Sidebar

Skip to HTML example

When to use this component

Use the sidebar component to display related links or supplementary information alongside main content.

Use a sidebar when you need to:

display related links alongside main content
show contact information or support details
provide quick access to related resources or documents

When not to use this component

Do not use a sidebar:

for primary navigation (use the main navigation instead)
on mobile-first designs where space is limited
when the sidebar content is more important than the main content

How it works

The sidebar component has a coloured top border to visually separate it from the main content. It can contain multiple sections, each with a heading and list of links or content.

Place the sidebar in a one-third column alongside a two-thirds main content area.

HTML example

Copy the HTML from this page directly into your web template.

<aside class="dfe-sidebar">
  <div class="dfe-sidebar-section">
    <h2 class="dfe-sidebar-section__main-heading">Related links</h2>
    <div class="dfe-sidebar-section__content">
      <ul class="dfe-sidebar-section__list">
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Guidance document</a>
        </li>
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Application form</a>
        </li>
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Contact support</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="dfe-sidebar-section">
    <h2 class="dfe-sidebar-section__main-heading">Contact</h2>
    <div class="dfe-sidebar-section__content">
      <p class="govuk-body-s">Email: <a class="govuk-link" href="mailto:support@example.gov.uk">support@example.gov.uk</a></p>
      <p class="govuk-body-s">Phone: 0800 123 4567</p>
    </div>
  </div>
</aside>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}
  <!-- Main page content -->
{% endblock %}

{% block rightColumn %}

<aside class="dfe-sidebar">
  <div class="dfe-sidebar-section">
    <h2 class="dfe-sidebar-section__main-heading">Related links</h2>
    <div class="dfe-sidebar-section__content">
      <ul class="dfe-sidebar-section__list">
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Guidance document</a>
        </li>
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Application form</a>
        </li>
        <li class="dfe-sidebar-section__list-item">
          <a class="govuk-link dfe-sidebar-section__link" href="#">Contact support</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="dfe-sidebar-section">
    <h2 class="dfe-sidebar-section__main-heading">Contact</h2>
    <div class="dfe-sidebar-section__content">
      <p class="govuk-body-s">Email: <a class="govuk-link" href="mailto:support@example.gov.uk">support@example.gov.uk</a></p>
      <p class="govuk-body-s">Phone: 0800 123 4567</p>
    </div>
  </div>
</aside>


{% endblock %}

If you would like any additional advice or guidance with using this example on Power Pages, please contact the Solutions Delivery Team.