Generic header

If your service is public-facing and isn’t on GOV.UK, use the generic header instead of the GOV.UK header.

Generic header with logo text and URL

Input

= govuk_generic_header(logo_text: 'A generic service', url: '/')

<%= govuk_generic_header(logo_text: 'A generic service', url: '/') %>

Output

A generic service

<header>
  <div class="govuk-generic-header">
    <div class="govuk-generic-header__container govuk-width-container">
      <div class="govuk-generic-header__logo">
        <a class="govuk-generic-header__homepage-link" href="/">
          A generic service
        </a>
      </div>
    </div>
  </div>
</header>

Generic header with a custom logo

Input

= govuk_generic_header do |header|
  - header.with_logo do
    a href='/' class='govuk-generic-header__homepage-link'
      | 🩵 My generic service

<%= govuk_generic_header do |header|
header.with_logo do %><a class="govuk-generic-header__homepage-link" href="/">
    🩵 My generic service
  </a><% end; end %>

Output

🩵 My generic service

<header>
  <div class="govuk-generic-header">
    <div class="govuk-generic-header__container govuk-width-container">
      <div class="govuk-generic-header__logo">
        <a class="govuk-generic-header__homepage-link" href="/">
          🩵 My generic service
        </a>
      </div>
    </div>
  </div>
</header>

Generic header with custom content

Any HTML passed into the component’s block will be rendered inside the header after the logo.

It will need custom CSS to position it.

Input

= govuk_generic_header(logo_text: 'A generic service', url: '/', html_attributes: { class: 'with-username' }) do
  | Sign out

<%= govuk_generic_header(logo_text: 'A generic service', url: '/', html_attributes: { class: 'with-username' }) do %>Sign out
<% end %>

Output

A generic service

Sign out

<header>
  <div class="govuk-generic-header with-username">
    <div class="govuk-generic-header__container govuk-width-container">
      <div class="govuk-generic-header__logo">
        <a class="govuk-generic-header__homepage-link" href="/">
          A generic service
        </a>
      </div>
      Sign out
    </div>
  </div>
</header>

Generic header with service navigation and a phase banner

Like with the GOV.UK header, the header is rendered inside a <header> element. Service navigation and phase banner components can be rendered beneath using slots.

Input

= govuk_generic_header(logo_text: 'Some organisation', url: '/') do |header|
  - header.with_service_navigation(service_name: 'Service navigation', service_url: '#')
  - header.with_phase_banner(tag: { text: "Beta" }, text: "This is a generic service")

<%= govuk_generic_header(logo_text: 'Some organisation', url: '/') do |header|
header.with_service_navigation(service_name: 'Service navigation', service_url: '#')
header.with_phase_banner(tag: { text: "Beta" }, text: "This is a generic service")
end %>

Output

Some organisation

Service navigation

Beta This is a generic service

<header>
  <div class="govuk-generic-header">
    <div class="govuk-generic-header__container govuk-width-container">
      <div class="govuk-generic-header__logo">
        <a class="govuk-generic-header__homepage-link" href="/">
          Some organisation
        </a>
      </div>
    </div>
  </div>
  <section aria-label="Service information" class="govuk-service-navigation" data-module="govuk-service-navigation">
    <div class="govuk-width-container">
      <div class="govuk-service-navigation__container">
        <span class="govuk-service-navigation__service-name">
          <a class="govuk-service-navigation__link" href="#">
            Service navigation
          </a>
        </span>
      </div>
    </div>
  </section>
  <div class="govuk-phase-banner">
    <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 generic service
      </span>
    </p>
  </div>
</header>