Layouts

Choose a layout to match the content you want to write.

• Page – Simple layout designed for maximum flexibility of content.

• Page with sub navigation – Layout with sub navigation.

• Post – Layout for date-based content, such as blog posts or news items.

• Collection – Layout for a paginated list of pages.

• Error – Layout for an error page.

• Hub – Layout for a hub page.

• Product page – Layout for product and marketing pages.

Common front matter options

Layouts can accept the following front matter data to customise the appearance, content and behaviour of a layout.

Name	Type	Description
layout	string	Page layout.
includeInBreadcrumbs	boolean	Include page as the last item in any breadcrumbs (default is false).
order	integer	Ranking of page in navigation. Lower numbers appear before pages with a higher number.
title	string	Page title.
theme	string	Common title page sits under in sub navigation.
caption	string	Heading caption that sits above the page title.
description	string	Page description.
opengraphImage	object	Open Graph image that appears on social media networks.
opengraphImage.src	string	Path to Open Graph image. Can be a relative or absolute URL. This value overrides opengraphImageUrl in plugin options.
opengraphImage.alt	string	Alternative text for Open Graph image.

Overriding layouts

Layouts provided by this plugin can be overridden, or used as a basis for your own, by using Nunjuck’s template inheritance feature.

For example, to show a notification banner at the top of each page that uses the Page layout, add a file named _includes/page.njk with the following content:

{# Plugin layouts can be loaded from "layouts" #}
{% extends "layouts/page.njk" %}

{# Load any GOV.UK Frontend components #}
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{# Override the `content` block #}
{% block content %}
  {# Templates can include front matter data #}
  {% if reviewed and reviewAgain %}
    <p>This page was last reviewed on {{ reviewed | nhsukDate }}.
    It needs to be reviewed again on {{ reviewAgain | nhsukDate }}.</p>
  {% endif %}

  {{ appDocumentHeader({
    title: title,
    description: description
  }) }}

  {{ appProseScope(content) if content }}
{% endblock %}

You can extend the following layouts:

• layouts/base.njk
• layouts/collection.njk
• layouts/error.njk
• layouts/feed.njk
• layouts/hub.njk
• layouts/page.njk
• layouts/post.njk
• layouts/product.njk
• layouts/sitemap.njk
• layouts/sub-navigation.njk
• layouts/tag.njk
• layouts/tags.njk

Replacement layouts must share the same name and saved in your configured layout directory.

Learn more about layouts on the Eleventy website.