Layouts

Choose a layout to match the type of 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.

• 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.
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.
aside	object	Small portion of content that is indirectly related to the main content.
aside.title	string	Title for aside.
aside.content	string	Content for aside. Accepts Markdown.
related	object	Related links section. See section.
related.sections	Array	Multiple related links sections. See section.

Options for section

Name	Type	Description
title	string	Title for group of related links (default is ‘Related content’).
items	Array	See items.
subsections	Array	Subsections containing related links.
subsections[].title	string	Title for a subsection of related links.
subsections[].items	Array	Related items in a subsection. See items.

Options for items

Name	Type	Description
text	string	Title of related content.
href	string	Link for the related content.

Overriding layouts

Layouts provided by this plugin can be completely 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 #}
  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | govukDate) + ".
    It needs to be reviewed again on " + (reviewAgain | govukDate) + "."
  }) if reviewed and reviewAgain }}

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

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

The following layouts can be extended:

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

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

Learn more about layouts on the Eleventy website.