Public layout example
With current account navigation
The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as current. Valid options are currently your-account and manage.
How it looks (preview)
<!DOCTYPE html>
<!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="govuk-template" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>GOV.UK - The best place to find government services and information</title>
<script src="/assets/govuk_publishing_components/vendor/lux/lux-measurer-625824d7d6eb4d9028fb0b9eaecffea71768a1ab991e9942004dce005fa5d517.js" async="async"></script>
<script src="/assets/govuk_publishing_components/rum-loader-152bb32f65f8beafc64a802e176ef779c3da9bf414dcf5089c42232f2092f31f.js" async="async" data-lux-reporter-script="/assets/govuk_publishing_components/vendor/lux/lux-reporter-0bf214fab70cb817404b8428d12176a2e06fd9ce56c695c1812e7e9f51efef58.js"></script>
<meta name="govuk:components_gem_version" content="43.5.0" />
<script src="/assets/govuk_publishing_components/load-analytics-03dff35cedbf20f1597ff38c1b9bdf6e3f61bcfe355c81007a15115c51cb4beb.js" type="module"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="U0Eg53_ek_rjMEKsHnD3Xv12nDxe6uxOE5o-nsW7EIIeTSt_0MPkdQGlURYGxIvFQVj2EfXecQNZCrHPsxoY0g" />
<link rel="stylesheet" href="/assets/application-9b3ace74cb86c0c8b681a747d853fbeaa581a5ff6d6090028c0d0318f44d0f51.css" media="all" />
<link rel="icon" sizes="48x48" href="/assets/favicon-f20b8285392e866956853ce567218d4b237a9c95740915da62c49eb321b234af.ico">
<link rel="icon" sizes="any" href="/assets/favicon-058fd73a9a1cffd4808be36decee3629e6c15c4b0e6f616ed469c1b6d1d511c5.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/govuk-icon-mask-3746775d944f1f2ec68414a66f327414cc4287343a0ac0672f72f08db1fdc474.svg" color="#0b0c0c">
<link rel="apple-touch-icon" href="/assets/govuk-icon-180-11c2d4e8663c6e6c6251968355f21c2d17eced64d53a76d56f2028d794371cb8.png">
<meta name="theme-color" content="#0b0c0c" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://www.gov.uk/assets/govuk-opengraph-image-bbfe0e4dddcae7112f69445ca5a581cf5131313840f8b3699c67e8bf465d98f8.png">
</head>
<body class="gem-c-layout-for-public govuk-template__body">
<script nonce="Sp7A823IuvKO75H+e+xtXw==">
//<![CDATA[
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
//]]>
</script>
<div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper" data-module="cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK" hidden>
<div class="govuk-cookie-banner__message govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on GOV.UK</h2>
<div tabindex="-1" class="govuk-cookie-banner__content gem-c-cookie-banner__confirmation">
<span class="gem-c-cookie-banner__content"><p class='govuk-body'>We use some essential cookies to make this website work.</p><p class='govuk-body'>We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p><p class='govuk-body'>We also use cookies set by other sites to help us deliver content from their services.</p></span>
<p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
data-ga4-cookie-banner
data-module="ga4-link-tracker"
data-ga4-track-links-only
data-ga4-set-indexes
data-ga4-link="{"event_name":"navigation","type":"cookie banner","section":"You have accepted additional cookies"}"
>You have accepted additional cookies. <span class="gem-c-cookie-banner__confirmation-message">You can <a class="govuk-link" href="/help/cookies">change your cookie settings</a> at any time.</span></p>
<p class="gem-c-cookie-banner__confirmation-message--rejected govuk-body" hidden>You have rejected additional cookies. <span class="gem-c-cookie-banner__confirmation-message">You can <a class="govuk-link" href="/help/cookies">change your cookie settings</a> at any time.</span></p>
</div>
</div>
</div>
<div class="js-confirmation-buttons govuk-button-group">
<button class="gem-c-button govuk-button" type="submit" data-accept-cookies="true" data-cookie-types="all">Accept additional cookies</button>
<button class="gem-c-button govuk-button" type="submit" data-reject-cookies="true">Reject additional cookies</button>
<a class="govuk-link" href="/help/cookies">View cookies</a>
</div>
<div hidden class="js-hide-button govuk-button-group">
<button
class="gem-c-cookie-banner__hide-button govuk-button"
data-hide-cookie-banner="true"
data-module="ga4-event-tracker"
data-ga4-event="{"event_name":"select_content","type":"cookie banner","action":"closed","section":"You have accepted additional cookies"}" >
Hide this message
</button>
</div>
</div>
</div>
<a class="gem-c-skip-link govuk-skip-link govuk-!-display-none-print" data-module="govuk-skip-link" href="#content">Skip to main content</a>
<header class="gem-c-layout-header govuk-header gem-c-layout-header--no-bottom-border" role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-grid-row">
<div class="gem-c-layout-header__logo govuk-grid-column-one-half">
<div class="govuk-header__logo gem-c-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 148 30"
height="30"
width="148"
aria-label="GOV.UK"
>
<title>GOV.UK</title>
<path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
</a>
</div>
</div>
<div class="govuk-grid-column-one-half gem-c-layout-header__search govuk-!-display-none-print">
<button
class="search-toggle govuk-js-header-toggle"
data-search-toggle-for="search"
data-button-name="search"
data-show-text="Show search"
data-hide-text="Hide search"
aria-controls="search-80d40584"
>
Show search
</button>
<form
action="/search"
class="gem-c-layout-header__search-form govuk-clearfix govuk-!-display-none-print"
id="search-80d40584"
method="get"
role="search"
>
<div class="gem-c-search govuk-!-display-none-print govuk-!-margin-bottom-0 gem-c-search--no-border gem-c-search--on-white" data-module="gem-toggle-input-class-on-focus">
<label for="site-search-text" class="gem-c-search__label">Search on GOV.UK</label>
<div class="gem-c-search__item-wrapper">
<div class="js-search-input-wrapper">
<input enterkeyhint="search" class="gem-c-search__item gem-c-search__input js-class-toggle" id="site-search-text" name="q" title="Search" type="search" value="" autocorrect="off" autocapitalize="off">
</div>
<div class="gem-c-search__item gem-c-search__submit-wrapper">
<button class="gem-c-search__submit" type="submit" enterkeyhint="search">
Search GOV.UK
<svg
class="gem-c-search__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3" />
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3" />
</svg>
</button> </div>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<div class="">
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
</div>
<div class="govuk-width-container">
<div class="gem-c-phase-banner govuk-phase-banner" data-ga4-phase-banner="beta" data-module="ga4-link-tracker" data-ga4-track-links-only="" data-ga4-set-indexes="" data-ga4-link="{"event_name":"navigation","type":"phase banner","section":"This is a new service – your feedback will help us to improve it."}">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>
<span class="govuk-phase-banner__text">This is a new service – your <a class="govuk-link" href="https://signin.account.gov.uk/contact-us?supportType=PUBLIC">feedback</a> will help us to improve it.</span>
</p></div>
<div class="govuk-grid-row govuk-main-wrapper">
<div class="govuk-grid-column-one-third">
<nav aria-label="Account management" class="gem-c-layout-for-public-account-nav">
<ul class="gem-c-layout-for-public-account-menu">
<li class="gem-c-layout-for-public-account-menu__item ">
<a class="gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state" href="https://home.account.gov.uk">Your GOV.UK One Login</a>
</li>
<li class="gem-c-layout-for-public-account-menu__item gem-c-layout-for-public-account-menu__item--current">
<a class="gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state" aria-current="page" data-module="explicit-cross-domain-links" href="https://home.account.gov.uk/security">Settings</a>
</li>
</ul>
</nav>
</div>
<div class="govuk-grid-column-two-thirds">
<div id="wrapper">
<main role="main" id="content">
<h2 class="govuk-heading-l">This is a title</h2>
<p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
</main>
</div>
</div>
</div>
</div>
<div class="govuk-width-container">
<div class="gem-c-feedback govuk-!-display-none-print" data-module="feedback ga4-event-tracker">
<div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
<div class="gem-c-feedback__prompt-content">
<div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
<div class="gem-c-feedback__prompt-question-answer">
<h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
<ul class="gem-c-feedback__option-list">
<li class="gem-c-feedback__option-list-item govuk-visually-hidden" hidden>
<a class="gem-c-feedback__prompt-link" role="button" hidden="hidden" aria-hidden="true" href="/contact/govuk">
Maybe
</a> </li>
<li class="gem-c-feedback__option-list-item">
<button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Yes","section":"Is this page useful?","tool_name":"Is this page useful?"}">
Yes <span class="govuk-visually-hidden">this page is useful</span>
</button> </li>
<li class="gem-c-feedback__option-list-item">
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"No","section":"Is this page useful?","tool_name":"Is this page useful?"}">
No <span class="govuk-visually-hidden">this page is not useful</span>
</button> </li>
</ul>
</div>
</div>
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
Thank you for your feedback
</div>
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" aria-expanded="false" aria-controls="something-is-wrong" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page","section":"Is this page useful?","tool_name":"Is this page useful?"}">
Report a problem with this page
</button> </div>
</div>
</div>
<form action="https://www.gov.uk/contact/govuk/problem_reports"
id="something-is-wrong"
class="gem-c-feedback__form js-feedback-form"
method="post"
hidden>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-errors" tabindex="-1" hidden></div>
<input type="hidden" name="url" value="https://components-gem-pr-4256.herokuapp.com/component-guide/layout_for_public/with_current_account_navigation">
<h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
<p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Don’t include personal or financial information like your National Insurance number or credit card details.</p>
<div class="govuk-visually-hidden" aria-hidden="true">
<label for="giraffe">This field is for robots only. Please leave blank</label>
<input id="giraffe" name="giraffe" type="text" pattern=".{0}" tabindex="-1" autocomplete="off">
</div>
<div class="gem-c-textarea govuk-form-group govuk-!-margin-bottom-6">
<label for="textarea-def801e4" class="gem-c-label govuk-label">What were you doing?</label>
<textarea name="what_doing" class="govuk-textarea" id="textarea-def801e4" rows="3" spellcheck="true" aria-describedby="feedback_explanation">
</textarea>
</div>
<div class="gem-c-textarea govuk-form-group govuk-!-margin-bottom-6">
<label for="textarea-ae10d834" class="gem-c-label govuk-label">What went wrong?</label>
<textarea name="what_wrong" class="govuk-textarea" id="textarea-ae10d834" rows="3" spellcheck="true">
</textarea>
</div>
<button class="gem-c-button govuk-button" type="submit" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Send","section":"Help us improve GOV.UK","tool_name":"Help us improve GOV.UK"}">Send</button>
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
aria-controls="something-is-wrong"
aria-expanded="true">
Cancel
</button>
</div>
</div>
</form>
<script nonce="Sp7A823IuvKO75H+e+xtXw==">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
var input = document.querySelector("#giraffe"),
form = document.querySelector("#something-is-wrong")
form.addEventListener("submit", spamCapture);
function spamCapture(e) {
if (input.value.length !== 0) return;
e.preventDefault();
}
});
//]]>
</script>
<div id="page-is-not-useful" class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
<div class="gem-c-feedback__error-summary js-errors" tabindex="-1" hidden></div>
<h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
<p id="survey_explanation" class="gem-c-feedback__form-paragraph">
To help us improve GOV.UK, we’d like to know more about your visit today.
<a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab)</a>.
</p>
<button
class="govuk-button govuk-button--secondary js-close-form"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
<footer class="gem-c-layout-footer govuk-footer gem-c-layout-footer--border" role="contentinfo" data-module="ga4-link-tracker">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-grid-column-two-thirds govuk-!-display-none-print">
<h2 class="govuk-footer__heading govuk-heading-m">Services and information</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-2">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/benefits">Benefits</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/births-deaths-marriages">Births, death, marriages and care</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/business">Business and self-employed</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/childcare-parenting">Childcare and parenting</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/citizenship">Citizenship and living in the UK</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/justice">Crime, justice and the law</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/disabilities">Disabled people</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/driving">Driving and transport</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"9","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/education">Education and learning</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"10","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/employing-people">Employing people</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"11","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/environment-countryside">Environment and countryside</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"12","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/housing-local-services">Housing and local services</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"13","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/tax">Money and tax</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"14","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/abroad">Passports, travel and living abroad</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"15","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/visas-immigration">Visas and immigration</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"16","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/working">Working, jobs and pensions</a>
</li>
</ul>
</div>
<div class="govuk-grid-column-one-third govuk-!-display-none-print">
<h2 class="govuk-footer__heading govuk-heading-m">Government activity</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-1">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/organisations">Departments</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/news-and-communications">News</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/guidance-and-regulation">Guidance and regulation</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/research-and-statistics">Research and statistics</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/policy-papers-and-consultations">Policy papers and consultations</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/transparency-and-freedom-of-information-releases">Transparency</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/how-government-works">How government works</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/get-involved">Get involved</a>
</li>
</ul>
</div>
</div>
<hr class="govuk-footer__section-break govuk-!-display-none-print">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list govuk-!-display-none-print">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help">Help</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/privacy-notice">Privacy</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/cookies">Cookies</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/accessibility-statement">Accessibility statement</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/contact">Contact</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/terms-conditions">Terms and conditions</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" lang="cy" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/cymraeg">Rhestr o Wasanaethau Cymraeg</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a>
</li>
</ul>
<svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
/>
</svg>
<span
class="govuk-footer__licence-description"
data-ga4-track-links-only
data-ga4-link="{"event_name":"navigation","section":"Licence","index_section":"4","index_link":"1","index_section_count":"5","text":"Open Government Licence v3.0","index_total":"1","type":"footer"}"
>
All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div
class="govuk-footer__meta-item"
data-ga4-link="{"event_name":"navigation","section":"Copyright","index_section":"5","index_link":"1","index_section_count":"5","text":"© Crown copyright","index_total":"1","type":"footer"}"
>
<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script src="/assets/application-72fa0b47f220b9ae9eda922a6c3ec742f93135f982156d445bd12e438c3d8876.js" type="module"></script>
</body></html>How to call this example
<%= render "govuk_publishing_components/components/layout_for_public", {
show_account_layout: true,
account_nav_location: "manage"
} do %>
<h2 class="govuk-heading-l">This is a title</h2>
<p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
<% end %>