Public layout example
With cross service header
Passes the navigation through to the cross service header.
How it looks (preview)
<!DOCTYPE html>
<html class="govuk-template" lang="en">
<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-329752570db440c667561e18b05d9cbacf135d052985884bfe84716837adc64a.js" async="async"></script>
<script src="/assets/govuk_publishing_components/rum-custom-data-1f749ebde3b17d1c5868ebdf4d6876306468a4a252d775d8f987abb6142da4bd.js" type="module"></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-f829c6158e7c319722ba7ef887f1c6b4c41bcf45e12079d74b39b269611b8771.js"></script>
<meta name="govuk:components_gem_version" content="68.0.0">
<script src="/assets/govuk_publishing_components/load-analytics-1c46a4e4fd726c5bb8ba155073e1e33f13c653abe10ed5c7c63c3d0657b0a347.js" type="module"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="c_e9595yvBV7JpwuktrFWMH2mbeuVV8d_lo19eEVkJ2FyARqRpYHJ_CXBW7y_s3IdAJwDxounKtz39kUDEEt5g" />
<link rel="stylesheet" href="/assets/application-dc1b51e77e10a9ea7b81607ec85ff6aa09f2eec24f01a4e2336586673a101706.css" media="all" />
<link rel="icon" sizes="48x48" href="/assets/favicon-dcd99aa1df9a5d4f631e65921c911ca6def7775a1c49caad7d01511adb62557f.ico">
<link rel="icon" sizes="any" href="/assets/favicon-2ed10a5597b0c04baaec02a251b5b91bbe53999b9a07a6c63ece15e1cf56c529.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/govuk-icon-mask-3746775d944f1f2ec68414a66f327414cc4287343a0ac0672f72f08db1fdc474.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/govuk-icon-180-78bc4add5967c8910bc25795fa94e5257105592384eac8c5a97ed2cbd4ffef5d.png">
<meta name="theme-color" content="#1d70b8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://www.gov.uk/assets/govuk-opengraph-image-ec769b07c1e4564230a4e1f7400d8b7cb2c8694b113f988d51d989cfbf855caa.png">
</head>
<body class="gem-c-layout-for-public govuk-template__body">
<script nonce="4JWz+rB6wZiZ/hbZH9RqAQ==">
//<![CDATA[
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
//]]>
</script>
<div id="global-cookie-message" data-module="cookie-banner" data-nosnippet="" aria-label="Cookies on GOV.UK" class="gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper" role="region" hidden="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">
<div 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></div>
<p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
data-ga4-cookie-banner
data-module="ga4-link-tracker"
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 cookie message
</button>
</div>
</div>
</div>
<a data-module="govuk-skip-link" class="gem-c-skip-link govuk-skip-link govuk-!-display-none-print" href="#content">Skip to main content</a>
<header>
<div class="gem-c-cross-service-header gem-c-rebranded-cross-service-header" data-module="cross-service-header">
<div class="gem-c-rebranded-one-login-header" data-one-login-header-nav>
<div class="gem-c-rebranded-one-login-header__container govuk-width-container">
<div class="gem-c-rebranded-one-login-header__logo">
<a href="https://www.gov.uk/" class="gem-c-rebranded-one-login-header__link gem-c-rebranded-one-login-header__link--homepage">
<svg
focusable="false"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 324 60"
height="30"
width="162"
fill="currentcolor"
class="gem-c-rebranded-one-login-header__logotype"
aria-label="GOV.UK">
<title>GOV.UK</title>
<g>
<circle cx="20" cy="17.6" r="3.7"></circle>
<circle cx="10.2" cy="23.5" r="3.7"></circle>
<circle cx="3.7" cy="33.2" r="3.7"></circle>
<circle cx="31.7" cy="30.6" r="3.7"></circle>
<circle cx="43.3" cy="17.6" r="3.7"></circle>
<circle cx="53.2" cy="23.5" r="3.7"></circle>
<circle cx="59.7" cy="33.2" r="3.7"></circle>
<circle cx="31.7" cy="30.6" r="3.7"></circle>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
</g>
<circle class="gem-c-rebranded-one-login-header__logo-dot" cx="226" cy="36" r="7.3"></circle>
<path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>
</a>
</div>
<button type="button"
aria-controls="one-login-header__nav"
aria-label="Show GOV.UK One Login menu"
data-open-class="gem-c-rebranded-cross-service-header__toggle--open"
data-label-for-show="Show GOV.UK One Login menu"
data-label-for-hide="Hide GOV.UK One Login menu"
aria-expanded="false"
class="gem-c-rebranded-cross-service-header__toggle js-x-header-toggle">
<span class="gem-c-rebranded-cross-service-header__toggle-content-wrapper">
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="150 150 250 250" fill="currentcolor" class="gem-c-rebranded-cross-service-header__logo ">
<path d="M300.002 312.261C249.445 312.261 208.346 271.165 208.346 220.608C208.346 170.051 249.445 128.954 300.002 128.954C350.559 128.954 391.655 170.051 391.655 220.608C391.655 271.165 350.559 312.261 300.002 312.261ZM300.002 170.892C272.673 170.892 250.389 193.175 250.389 220.504C250.389 247.83 272.673 270.113 300.002 270.113C327.33 270.113 349.611 247.83 349.611 220.504C349.611 193.175 327.33 170.892 300.002 170.892Z" />
<path d="M221.275 471.046H179.231V365.202H420.769V407.246H221.275V471.046Z" />
</svg>
<span class="gem-c-rebranded-cross-service-header__toggle-content">One Login</span>
</span>
</button>
<nav aria-label="GOV.UK One Login" class="gem-c-rebranded-one-login-header__nav" data-open-class="gem-c-rebranded-one-login-header__nav--open" id="one-login-header__nav">
<ul class="gem-c-rebranded-one-login-header__nav__list">
<li class="gem-c-rebranded-one-login-header__nav__list-item">
<a class="gem-c-rebranded-one-login-header__nav__link" href="#">
<span class="gem-c-rebranded-one-login-header__nav__link-content">
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="150 150 250 250" fill="currentcolor" class="gem-c-rebranded-cross-service-header__logo gem-c-rebranded-cross-service-header__logo--nav">
<path d="M300.002 312.261C249.445 312.261 208.346 271.165 208.346 220.608C208.346 170.051 249.445 128.954 300.002 128.954C350.559 128.954 391.655 170.051 391.655 220.608C391.655 271.165 350.559 312.261 300.002 312.261ZM300.002 170.892C272.673 170.892 250.389 193.175 250.389 220.504C250.389 247.83 272.673 270.113 300.002 270.113C327.33 270.113 349.611 247.83 349.611 220.504C349.611 193.175 327.33 170.892 300.002 170.892Z" />
<path d="M221.275 471.046H179.231V365.202H420.769V407.246H221.275V471.046Z" />
</svg>
GOV.UK One Login
</span>
</a> </li>
<li class="gem-c-rebranded-one-login-header__nav__list-item">
<a class="gem-c-rebranded-one-login-header__nav__link" href="#">
<span class="gem-c-rebranded-one-login-header__nav__link-content gem-c-rebranded-one-login-header__nav__link-content--sign-out"></span>
</a> </li>
</ul>
</nav>
</div>
</div>
<section data-module="govuk-service-navigation" aria-label="Service information" class="gem-c-service-navigation govuk-service-navigation"> <div class="govuk-width-container">
<div class="govuk-service-navigation__container">
<span class="govuk-service-navigation__service-name">My Service Name</span>
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
<button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation-16d35221" hidden aria-hidden="true">
Menu
</button>
<ul class="govuk-service-navigation__list" id="navigation-16d35221">
<li class="govuk-service-navigation__item govuk-service-navigation__item--active">
<a class="govuk-service-navigation__link" aria-current="true" href="item-1">
<strong class="govuk-service-navigation__active-fallback">Navigation item 1</strong>
</a></li> <li class="govuk-service-navigation__item">
<a class="govuk-service-navigation__link" href="item-2">Navigation item 2</a>
</li> <li class="govuk-service-navigation__item">
<a class="govuk-service-navigation__link" href="item-3">Hidden on desktop</a>
</li> </ul>
</nav>
</div>
</div>
</section>
</div>
</header>
<div class="govuk-width-container">
<div data-module="feedback ga4-event-tracker" class="gem-c-feedback govuk-!-display-none-print">
<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" 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" 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-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="/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="http://components.publishing.service.gov.uk/component-guide/layout_for_public/with_cross_service_header">
<h2 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h2>
<p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Do not 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-bfdc89f1" class="gem-c-label govuk-label">What were you doing?</label>
<textarea name="what_doing" class="govuk-textarea" id="textarea-bfdc89f1" 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-dd6a17bb" class="gem-c-label govuk-label">What went wrong?</label>
<textarea name="what_wrong" class="govuk-textarea" id="textarea-dd6a17bb" rows="3" spellcheck="true">
</textarea>
</div>
<div class="gem-c-feedback__button-wrapper">
<button class="gem-c-button govuk-button govuk-!-margin-bottom-6" 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="gem-c-button govuk-button gem-c-button--secondary-quiet govuk-!-margin-bottom-0 js-close-form" type="submit" aria-controls="something-is-wrong">Cancel</button>
</div>
</div>
</div>
</form>
<script nonce="4JWz+rB6wZiZ/hbZH9RqAQ==">
//<![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>
<h2 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h2>
<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<noscript> and requires JavaScript</noscript>)</a>.
</p>
<button class="gem-c-button govuk-button gem-c-button--secondary-quiet govuk-!-margin-bottom-6 js-close-form" type="submit" aria-controls="page-is-not-useful">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<footer data-module="ga4-link-tracker" class="gem-c-layout-footer govuk-footer">
<div class="govuk-width-container">
<svg
xmlns="http://www.w3.org/2000/svg"
focusable="false"
role="presentation"
viewBox="0 0 64 60"
height="30"
width="32"
fill="currentcolor"
class="govuk-footer__crown">
<g>
<circle cx="20" cy="17.6" r="3.7"></circle>
<circle cx="10.2" cy="23.5" r="3.7"></circle>
<circle cx="3.7" cy="33.2" r="3.7"></circle>
<circle cx="31.7" cy="30.6" r="3.7"></circle>
<circle cx="43.3" cy="17.6" r="3.7"></circle>
<circle cx="53.2" cy="23.5" r="3.7"></circle>
<circle cx="59.7" cy="33.2" r="3.7"></circle>
<circle cx="31.7" cy="30.6" r="3.7"></circle>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
</g>
</svg>
<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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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-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-f810085fafb8265b087b16e51e27122d06ecac0c675528c914d794f487ae085e.js" type="module"></script>
</body></html>How to call this example
<%= render "govuk_publishing_components/components/layout_for_public", {
show_cross_service_header: true,
service_name: "My Service Name",
one_login_navigation_items: {
one_login_home: {
href: "#"
},
one_login_sign_out: {
href: "#"
},
navigation_items: []
},
service_navigation_items: [
{
text: "Navigation item 1",
href: "item-1",
active: true
},
{
text: "Navigation item 2",
href: "item-2"
},
{
text: "Hidden on desktop",
href: "item-3",
show_only_in_collapsed_menu: true
}
]
} %>