ComponentHeader
58 of 58 upstream examples match.
Razor component: <NhsukHeader>
Showing the examples from upstream's review app. Show 2 more test-only examples
Default
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "NHS service standard",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Design system",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Content guide",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Accessibility",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Community and contribution",
Href = "#",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "NHS service standard",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Design system",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Content guide",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Accessibility",
Href = "#",
},
new HeaderNavigationItemsItem
{
Text = "Community and contribution",
Href = "#",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Digital service manual",
"href": "#"
},
"search": {
"input": {
"placeholder": "Search"
},
"label": {
"visuallyHiddenText": "Search the NHS digital service manual"
}
},
"navigation": {
"items": [
{
"text": "NHS service standard",
"href": "#"
},
{
"text": "Design system",
"href": "#"
},
{
"text": "Content guide",
"href": "#"
},
{
"text": "Accessibility",
"href": "#"
},
{
"text": "Community and contribution",
"href": "#"
}
]
}
}) }}Linked logo
Razor Pages and MVC
<nhsuk-header logo="@(new HeaderLogoOptions
{
Href = "#",
})" />Blazor
<NhsukHeader Logo="@(new HeaderLogoOptions
{
Href = "#",
})" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
}
}) }}Linked logo
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"colour": "white"
}) }}Unlinked logo
Razor Pages and MVC
<nhsuk-header />Blazor
<NhsukHeader />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({}) }}Unlinked logo
Razor Pages and MVC
<nhsuk-header colour="white" />Blazor
<NhsukHeader Colour="white" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"colour": "white"
}) }}White linked logo, custom
Razor Pages and MVC
<nhsuk-header
colour="white"
logo="@(new HeaderLogoOptions
{
Href = "#",
Src = "/nhsuk-frontend/assets/example-logo.svg",
Alt = "Great Ormond Street Hospital for Children, NHS Foundation Trust",
})"
/>Blazor
<NhsukHeader
Colour="white"
Logo="@(new HeaderLogoOptions
{
Href = "#",
Src = "/nhsuk-frontend/assets/example-logo.svg",
Alt = "Great Ormond Street Hospital for Children, NHS Foundation Trust",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"colour": "white",
"logo": {
"href": "#",
"src": "/nhsuk-frontend/assets/example-logo.svg",
"alt": "Great Ormond Street Hospital for Children, NHS Foundation Trust"
}
}) }}With account inline (logged in)
Razor Pages and MVC
<nhsuk-header
inline="true"
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Blazor
<NhsukHeader
Inline="true"
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Account",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
}
}) }}With account inline (logged in)
Razor Pages and MVC
<nhsuk-header
inline="true"
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Inline="true"
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Account",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
},
"colour": "white"
}) }}With account inline (logged out)
Razor Pages and MVC
<nhsuk-header
inline="true"
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
/>Blazor
<NhsukHeader
Inline="true"
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Log in"
}
]
}
}) }}With account inline (logged out)
Razor Pages and MVC
<nhsuk-header
inline="true"
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Inline="true"
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Log in"
}
]
},
"colour": "white"
}) }}With account (logged in)
Razor Pages and MVC
<nhsuk-header
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "florence.nightingale@nhs.net",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Blazor
<NhsukHeader
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "florence.nightingale@nhs.net",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"account": {
"items": [
{
"href": "#",
"text": "florence.nightingale@nhs.net",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
}
}) }}With account (logged in)
Razor Pages and MVC
<nhsuk-header
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "florence.nightingale@nhs.net",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "florence.nightingale@nhs.net",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"account": {
"items": [
{
"href": "#",
"text": "florence.nightingale@nhs.net",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
},
"colour": "white"
}) }}With account (logged out)
Razor Pages and MVC
<nhsuk-header
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
/>Blazor
<NhsukHeader
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"account": {
"items": [
{
"href": "#",
"text": "Log in"
}
]
}
}) }}With account (logged out)
Razor Pages and MVC
<nhsuk-header
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Log in",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"account": {
"items": [
{
"href": "#",
"text": "Log in"
}
]
},
"colour": "white"
}) }}With navigation
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
}
]
}
}) }}With navigation
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
}
]
},
"colour": "white"
}) }}With navigation (empty items)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
null,
null,
null,
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "Home",
Href = "/",
},
null,
null,
null,
new HeaderNavigationItemsItem
{
Text = "Reports",
Href = "/",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
null,
null,
null,
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "Home",
Href = "/",
},
null,
null,
null,
new HeaderNavigationItemsItem
{
Text = "Reports",
Href = "/",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Account",
"icon": true
},
false,
false,
false,
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"text": "Home",
"href": "/"
},
false,
false,
false,
{
"text": "Reports",
"href": "/"
}
]
}
}) }}With navigation (empty items)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
null,
null,
null,
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "Home",
Href = "/",
},
null,
null,
null,
new HeaderNavigationItemsItem
{
Text = "Reports",
Href = "/",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Account",
Icon = true,
},
null,
null,
null,
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Text = "Home",
Href = "/",
},
null,
null,
null,
new HeaderNavigationItemsItem
{
Text = "Reports",
Href = "/",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"account": {
"items": [
{
"href": "#",
"text": "Account",
"icon": true
},
false,
false,
false,
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"text": "Home",
"href": "/"
},
false,
false,
false,
{
"text": "Reports",
"href": "/"
}
]
},
"colour": "white"
}) }}With navigation (justified)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Justified = true,
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Justified = true,
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"justified": true,
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
}
]
}
}) }}With navigation (justified)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Justified = true,
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Justified = true,
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"justified": true,
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
}
]
},
"colour": "white"
}) }}With navigation (overflow)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Digital service manual",
"href": "#"
},
"search": {
"input": {
"placeholder": "Search"
},
"label": {
"visuallyHiddenText": "Search the NHS digital service manual"
}
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
},
{
"href": "#",
"text": "Another item #1"
},
{
"href": "#",
"text": "Another item #2"
}
]
}
}) }}With navigation (overflow)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Digital service manual",
"href": "#"
},
"search": {
"input": {
"placeholder": "Search"
},
"label": {
"visuallyHiddenText": "Search the NHS digital service manual"
}
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
},
{
"href": "#",
"text": "Another item #1"
},
{
"href": "#",
"text": "Another item #2"
}
]
},
"colour": "white"
}) }}With navigation (overflow, white)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
navigation="@(new HeaderNavigationOptions
{
Colour = "white",
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
Navigation="@(new HeaderNavigationOptions
{
Colour = "white",
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Digital service manual",
"href": "#"
},
"search": {
"input": {
"placeholder": "Search"
},
"label": {
"visuallyHiddenText": "Search the NHS digital service manual"
}
},
"navigation": {
"colour": "white",
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
},
{
"href": "#",
"text": "Another item #1"
},
{
"href": "#",
"text": "Another item #2"
}
]
}
}) }}With navigation (overflow, white)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
navigation="@(new HeaderNavigationOptions
{
Colour = "white",
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Digital service manual",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Search",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the NHS digital service manual",
},
})"
Navigation="@(new HeaderNavigationOptions
{
Colour = "white",
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Pregnancy",
Active = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #1",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Another item #2",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Digital service manual",
"href": "#"
},
"search": {
"input": {
"placeholder": "Search"
},
"label": {
"visuallyHiddenText": "Search the NHS digital service manual"
}
},
"navigation": {
"colour": "white",
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"href": "#",
"text": "Pregnancy",
"active": true
},
{
"href": "#",
"text": "NHS services"
},
{
"href": "#",
"text": "Another item #1"
},
{
"href": "#",
"text": "Another item #2"
}
]
},
"colour": "white"
}) }}With navigation (unlinked item)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Text = "Pregnancy",
Current = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Text = "Pregnancy",
Current = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"text": "Pregnancy",
"current": true
},
{
"href": "#",
"text": "NHS services"
}
]
}
}) }}With navigation (unlinked item)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Text = "Pregnancy",
Current = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Health A to Z",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Live Well",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Mental health",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Care and support",
},
new HeaderNavigationItemsItem
{
Text = "Pregnancy",
Current = true,
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "NHS services",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"navigation": {
"items": [
{
"href": "#",
"text": "Health A to Z"
},
{
"href": "#",
"text": "Live Well"
},
{
"href": "#",
"text": "Mental health"
},
{
"href": "#",
"text": "Care and support"
},
{
"text": "Pregnancy",
"current": true
},
{
"href": "#",
"text": "NHS services"
}
]
},
"colour": "white"
}) }}With organisation name
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Business Services Authority",
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Business Services Authority",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Business Services Authority"
}
}) }}With organisation name
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Business Services Authority",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Business Services Authority",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Business Services Authority"
},
"colour": "white"
}) }}With organisation name (and descriptor)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace Anywhere",
Descriptor = "NHS Foundation Trust",
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace Anywhere",
Descriptor = "NHS Foundation Trust",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace Anywhere",
"descriptor": "NHS Foundation Trust"
}
}) }}With organisation name (and descriptor)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace Anywhere",
Descriptor = "NHS Foundation Trust",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace Anywhere",
Descriptor = "NHS Foundation Trust",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace Anywhere",
"descriptor": "NHS Foundation Trust"
},
"colour": "white"
}) }}With organisation name (split with descriptor)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace",
"split": "Anywhere",
"descriptor": "NHS Foundation Trust"
}
}) }}With organisation name (split with descriptor)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace",
"split": "Anywhere",
"descriptor": "NHS Foundation Trust"
},
"colour": "white"
}) }}With organisation name (split with descriptor), search
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
search="@(new HeaderSearchOptions
{
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the Anytown Anyplace Anywhere website",
},
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
Search="@(new HeaderSearchOptions
{
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the Anytown Anyplace Anywhere website",
},
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace",
"split": "Anywhere",
"descriptor": "NHS Foundation Trust"
},
"search": {
"label": {
"visuallyHiddenText": "Search the Anytown Anyplace Anywhere website"
}
}
}) }}With organisation name (split with descriptor), search
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
search="@(new HeaderSearchOptions
{
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the Anytown Anyplace Anywhere website",
},
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Organisation="@(new HeaderOrganisationOptions
{
Name = "Anytown Anyplace",
Split = "Anywhere",
Descriptor = "NHS Foundation Trust",
})"
Search="@(new HeaderSearchOptions
{
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search the Anytown Anyplace Anywhere website",
},
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"organisation": {
"name": "Anytown Anyplace",
"split": "Anywhere",
"descriptor": "NHS Foundation Trust"
},
"search": {
"label": {
"visuallyHiddenText": "Search the Anytown Anyplace Anywhere website"
}
},
"colour": "white"
}) }}With search
Razor Pages and MVC
<nhsuk-header search="@(true)" />Blazor
<NhsukHeader Search="@(true)" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"search": true
}) }}With search
Razor Pages and MVC
<nhsuk-header search="@(true)" colour="white" />Blazor
<NhsukHeader Search="@(true)" Colour="white" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"search": true,
"colour": "white"
}) }}With search inline
Razor Pages and MVC
<nhsuk-header inline="true" search="@(true)" />Blazor
<NhsukHeader Inline="true" Search="@(true)" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"search": true
}) }}With search inline
Razor Pages and MVC
<nhsuk-header inline="true" search="@(true)" colour="white" />Blazor
<NhsukHeader Inline="true" Search="@(true)" Colour="white" />Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"search": true,
"colour": "white"
}) }}With service name
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service="Find your NHS number"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Find your NHS number"
}
}) }}With service name
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#",
})"
service="Find your NHS number"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#"
},
"service": {
"text": "Find your NHS number"
},
"colour": "white"
}) }}With service name, account inline (logged in)
Razor Pages and MVC
<nhsuk-header
inline="true"
service-options="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Blazor
<NhsukHeader
Inline="true"
Service="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"service": {
"text": "Get a self-test kit for HIV",
"href": "#"
},
"account": {
"items": [
{
"action": "#",
"text": "Log out"
}
]
}
}) }}With service name, account inline (logged in)
Razor Pages and MVC
<nhsuk-header
inline="true"
service-options="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Inline="true"
Service="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"service": {
"text": "Get a self-test kit for HIV",
"href": "#"
},
"account": {
"items": [
{
"action": "#",
"text": "Log out"
}
]
},
"colour": "white"
}) }}With service name, account inline (logged out)
Razor Pages and MVC
<nhsuk-header
inline="true"
service-options="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log in",
},
],
})"
/>Blazor
<NhsukHeader
Inline="true"
Service="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log in",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"service": {
"text": "Get a self-test kit for HIV",
"href": "#"
},
"account": {
"items": [
{
"action": "#",
"text": "Log in"
}
]
}
}) }}With service name, account inline (logged out)
Razor Pages and MVC
<nhsuk-header
inline="true"
service-options="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log in",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Inline="true"
Service="@(new HeaderServiceOptions
{
Text = "Get a self-test kit for HIV",
Href = "#",
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log in",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"inline": true,
"service": {
"text": "Get a self-test kit for HIV",
"href": "#"
},
"account": {
"items": [
{
"action": "#",
"text": "Log in"
}
]
},
"colour": "white"
}) }}With service name as separate link
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#/logo",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#/service",
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#/logo",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#/service",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#/logo"
},
"service": {
"text": "Find your NHS number",
"href": "#/service"
}
}) }}With service name as separate link
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#/logo",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#/service",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#/logo",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#/service",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#/logo"
},
"service": {
"text": "Find your NHS number",
"href": "#/service"
},
"colour": "white"
}) }}With service name (linked)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#",
})"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#nhs"
},
"service": {
"text": "Find your NHS number",
"href": "#"
}
}) }}With service name (linked)
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
service-options="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#",
})"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
Service="@(new HeaderServiceOptions
{
Text = "Find your NHS number",
Href = "#",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#nhs"
},
"service": {
"text": "Find your NHS number",
"href": "#"
},
"colour": "white"
}) }}With service name (linked and long), search
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
service-options="@(new HeaderServiceOptions
{
Text = "This a really long service name to fully test wrapping",
Href = "#",
})"
search="@(true)"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
Service="@(new HeaderServiceOptions
{
Text = "This a really long service name to fully test wrapping",
Href = "#",
})"
Search="@(true)"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#nhs"
},
"service": {
"text": "This a really long service name to fully test wrapping",
"href": "#"
},
"search": true
}) }}With service name (linked and long), search
Razor Pages and MVC
<nhsuk-header
logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
service-options="@(new HeaderServiceOptions
{
Text = "This a really long service name to fully test wrapping",
Href = "#",
})"
search="@(true)"
colour="white"
/>Blazor
<NhsukHeader
Logo="@(new HeaderLogoOptions
{
Href = "#nhs",
})"
Service="@(new HeaderServiceOptions
{
Text = "This a really long service name to fully test wrapping",
Href = "#",
})"
Search="@(true)"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"logo": {
"href": "#nhs"
},
"service": {
"text": "This a really long service name to fully test wrapping",
"href": "#"
},
"search": true,
"colour": "white"
}) }}With service name (linked with logo)
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Text = "Prototype kit",
Href = "#",
})"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Text = "Prototype kit",
Href = "#",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"text": "Prototype kit",
"href": "#"
}
}) }}With service name (linked with logo)
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Text = "Prototype kit",
Href = "#",
})"
colour="white"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Text = "Prototype kit",
Href = "#",
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"text": "Prototype kit",
"href": "#"
},
"colour": "white"
}) }}With service name, search, account (logged in, complex), navigation
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Href = "#",
Text = "Manage patients",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Text = "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust",
},
new HeaderAccountItemsItem
{
Href = "#",
Text = "Change role",
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Create user",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Find user",
},
],
})"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Href = "#",
Text = "Manage patients",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Text = "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust",
},
new HeaderAccountItemsItem
{
Href = "#",
Text = "Change role",
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Create user",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Find user",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"href": "#",
"text": "Manage patients"
},
"search": {
"input": {
"placeholder": "Name or NHS number"
},
"label": {
"visuallyHiddenText": "Search patients by name or NHS number"
}
},
"account": {
"items": [
{
"href": "#",
"text": "Florence Nightingale",
"icon": true
},
{
"text": "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
},
{
"href": "#",
"text": "Change role"
},
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"href": "#",
"text": "Home"
},
{
"href": "#",
"text": "Create user"
},
{
"href": "#",
"text": "Find user"
}
]
}
}) }}With service name, search, account (logged in, complex), navigation
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Href = "#",
Text = "Manage patients",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Text = "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust",
},
new HeaderAccountItemsItem
{
Href = "#",
Text = "Change role",
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Create user",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Find user",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Href = "#",
Text = "Manage patients",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Href = "#",
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Text = "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust",
},
new HeaderAccountItemsItem
{
Href = "#",
Text = "Change role",
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Create user",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Find user",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"href": "#",
"text": "Manage patients"
},
"search": {
"input": {
"placeholder": "Name or NHS number"
},
"label": {
"visuallyHiddenText": "Search patients by name or NHS number"
}
},
"account": {
"items": [
{
"href": "#",
"text": "Florence Nightingale",
"icon": true
},
{
"text": "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
},
{
"href": "#",
"text": "Change role"
},
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"href": "#",
"text": "Home"
},
{
"href": "#",
"text": "Create user"
},
{
"href": "#",
"text": "Find user"
}
]
},
"colour": "white"
}) }}With service name, search, account, navigation
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Text = "Search patient directory",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Patient list",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Advanced search",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Help guides",
},
],
})"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Text = "Search patient directory",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Patient list",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Advanced search",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Help guides",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"text": "Search patient directory",
"href": "#"
},
"search": {
"input": {
"placeholder": "Name or NHS number"
},
"label": {
"visuallyHiddenText": "Search patients by name or NHS number"
}
},
"account": {
"items": [
{
"text": "Florence Nightingale",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"href": "#",
"text": "Home"
},
{
"href": "#",
"text": "Patient list"
},
{
"href": "#",
"text": "Advanced search"
},
{
"href": "#",
"text": "Help guides"
}
]
}
}) }}With service name, search, account, navigation
Razor Pages and MVC
<nhsuk-header
service-options="@(new HeaderServiceOptions
{
Text = "Search patient directory",
Href = "#",
})"
search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Patient list",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Advanced search",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Help guides",
},
],
})"
colour="white"
/>Blazor
<NhsukHeader
Service="@(new HeaderServiceOptions
{
Text = "Search patient directory",
Href = "#",
})"
Search="@(new HeaderSearchOptions
{
Input = new HeaderSearchInputOptions
{
Placeholder = "Name or NHS number",
},
Label = new HeaderSearchLabelOptions
{
VisuallyHiddenText = "Search patients by name or NHS number",
},
})"
Account="@(new HeaderAccountOptions
{
Items = [
new HeaderAccountItemsItem
{
Text = "Florence Nightingale",
Icon = true,
},
new HeaderAccountItemsItem
{
Action = "#",
Text = "Log out",
},
],
})"
Navigation="@(new HeaderNavigationOptions
{
Items = [
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Home",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Patient list",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Advanced search",
},
new HeaderNavigationItemsItem
{
Href = "#",
Text = "Help guides",
},
],
})"
Colour="white"
/>Nunjucks (upstream)
{% from "nhsuk/components/header/macro.njk" import header %}
{{ header({
"service": {
"text": "Search patient directory",
"href": "#"
},
"search": {
"input": {
"placeholder": "Name or NHS number"
},
"label": {
"visuallyHiddenText": "Search patients by name or NHS number"
}
},
"account": {
"items": [
{
"text": "Florence Nightingale",
"icon": true
},
{
"action": "#",
"text": "Log out"
}
]
},
"navigation": {
"items": [
{
"href": "#",
"text": "Home"
},
{
"href": "#",
"text": "Patient list"
},
{
"href": "#",
"text": "Advanced search"
},
{
"href": "#",
"text": "Help guides"
}
]
},
"colour": "white"
}) }}