guide/content/components/header.slim
---
title: Header
---
p
| The GOV.UK header shows users that they are on GOV.UK and which service they
are using.
== render('/partials/example.*',
caption: "Default header",
code: header_normal) do
markdown:
Use the default header if your service has 5 pages or fewer.
== render('/partials/example.*',
caption: "Header with service name",
code: header_with_service_name) do
markdown:
Use the header with a service name if your service is more than 5 pages long - this can help users understand which service they are using.
The service name can be set using the `service_name` keyword argument.
The GOV.UK logo should link to the the GOV.UK homepage, and the service name should link to your service homepage.
== render('/partials/example.*',
caption: "Header with a product name",
code: header_with_custom_product_name)
markdown:
This is used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use a service name instead.
Use the `homepage_url` to link to your product homepage.
== render('/partials/example.*',
caption: "Header with navigation items",
code: header_with_navigation_items,
rendered_partial: "/components/header/header_with_navigation_items",
rendered_partial_js: true)
markdown:
Navigation items can be added using the `navigation_item` slot. When viewed
on mobile, they will appear in a dropdown menu.
== render('/partials/example.*',
caption: "Header with an alternative logo",
code: header_with_custom_logo_and_service_name) do
markdown:
If an alternative logo is needed, it can be set using the `custom_logo` slot.
This example uses an SVG graphic paired with text.
== render('/partials/related-navigation.*', links: header_info)