Footer
Read more about the footer component on the Gov.UK Design System website
@using GovUkDesignSystemDotNet
@await Html.GovUkFooter(new FooterViewModel())Options
| Name | Type | Description |
|---|---|---|
| Meta | FooterMetaViewModel | The meta section of the footer after any navigation, before the copyright and license information. See options for FooterMetaViewModel |
| NavigationSections | List<FooterNavigationSectionViewModel> | The navigation sections of the footer before a section break and the copyright and license information. See options for FooterNavigationSectionViewModel |
| ContentLicence | HtmlOrText | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. |
| Copyright | HtmlOrText |
The copyright information in the footer component, this defaults to
"© Crown copyright".
|
| ContainerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
| Classes | List<string> | Classes to add to the footer component container. |
| Attributes | Dictionary<string, string> | HTML attributes (for example data attributes) to add to the footer component container. |
| Name | Type | Description |
|---|---|---|
| VisuallyHiddenTitle | string |
Title for a meta item section.
Defaults to "Support links".
|
| HtmlOrText | HtmlOrText |
HTML or text to add to the meta section of the footer,
which will appear below any links specified using meta Items.
|
| Items | List<FooterItemViewModel> | The meta items add content within an unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section. See options for FooterItemViewModel |
| Name | Type | Description |
|---|---|---|
| Title | string | Required. Title for a section. |
| Columns | int? | Amount of columns to display items in navigation section of the footer. |
| Width | string |
Width of each navigation section in the footer.
You can pass any Design System grid width here – for example,
"one-third", "two-thirds" or "one-half".
Defaults to "full".
|
| Items | List<FooterItemViewModel> | The items within the navigation section of the footer component. See options for FooterItemViewModel |
| Name | Type | Description |
|---|---|---|
| Text | string | Required. List item text. |
| Href | string |
Required.
List item link href attribute
|
| Attributes | Dictionary<string, string> | HTML attributes (for example data attributes) to add to the anchor. |
Examples
Footer with links
@using GovUkDesignSystemDotNet
@await Html.GovUkFooter(new FooterViewModel
{
Meta = new FooterMetaViewModel
{
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "Item 1"
},
new FooterItemViewModel
{
Href = "#",
Text = "Item 2"
},
new FooterItemViewModel
{
Href = "#",
Text = "Item 3"
},
}
}
})Footer with secondary navigation
@using GovUkDesignSystemDotNet
@await Html.GovUkFooter(new FooterViewModel
{
NavigationSections = new List<FooterNavigationSectionViewModel>
{
new FooterNavigationSectionViewModel
{
Title = "Two column list",
Width = "two-thirds",
Columns = 2,
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 1"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 2"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 3"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 4"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 5"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 6"
},
}
},
new FooterNavigationSectionViewModel
{
Title = "Single column list",
Width = "one-third",
Columns = 1,
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 1"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 2"
},
new FooterItemViewModel
{
Href = "#",
Text = "Navigation item 3"
},
}
},
}
})Footer with links and secondary navigation
@using GovUkDesignSystemDotNet
@await Html.GovUkFooter(new FooterViewModel
{
NavigationSections = new List<FooterNavigationSectionViewModel>
{
new FooterNavigationSectionViewModel
{
Title = "Services and information",
Width = "two-thirds",
Columns = 2,
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "Benefits"
},
new FooterItemViewModel
{
Href = "#",
Text = "Births, deaths, marriages and care"
},
new FooterItemViewModel
{
Href = "#",
Text = "Business and self-employed"
},
new FooterItemViewModel
{
Href = "#",
Text = "Childcare and parenting"
},
new FooterItemViewModel
{
Href = "#",
Text = "Citizenship and living in the UK"
},
new FooterItemViewModel
{
Href = "#",
Text = "Crime, justice and the law"
},
new FooterItemViewModel
{
Href = "#",
Text = "Disabled people"
},
new FooterItemViewModel
{
Href = "#",
Text = "Driving and transport"
},
new FooterItemViewModel
{
Href = "#",
Text = "Education and learning"
},
new FooterItemViewModel
{
Href = "#",
Text = "Employing people"
},
new FooterItemViewModel
{
Href = "#",
Text = "Environment and countryside"
},
new FooterItemViewModel
{
Href = "#",
Text = "Housing and local services"
},
new FooterItemViewModel
{
Href = "#",
Text = "Money and tax"
},
new FooterItemViewModel
{
Href = "#",
Text = "Passports, travel and living abroad"
},
new FooterItemViewModel
{
Href = "#",
Text = "Visas and immigration"
},
new FooterItemViewModel
{
Href = "#",
Text = "Working, jobs and pensions"
},
}
},
new FooterNavigationSectionViewModel
{
Title = "Departments and policy",
Width = "one-third",
Columns = 1,
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "How government works"
},
new FooterItemViewModel
{
Href = "#",
Text = "Departments"
},
new FooterItemViewModel
{
Href = "#",
Text = "Worldwide"
},
new FooterItemViewModel
{
Href = "#",
Text = "Policies"
},
new FooterItemViewModel
{
Href = "#",
Text = "Publications"
},
new FooterItemViewModel
{
Href = "#",
Text = "Announcements"
},
}
},
},
Meta = new FooterMetaViewModel
{
Items = new List<FooterItemViewModel>
{
new FooterItemViewModel
{
Href = "#",
Text = "Help"
},
new FooterItemViewModel
{
Href = "#",
Text = "Cookies"
},
new FooterItemViewModel
{
Href = "#",
Text = "Contact"
},
new FooterItemViewModel
{
Href = "#",
Text = "Terms and conditions"
},
new FooterItemViewModel
{
Href = "#",
Text = "Rhestr o Wasanaethau Cymraeg"
},
},
HtmlOrText = new HtmlOrText(@<text>
Built by the
<a href="#"
class="govuk-footer__link">
Government Digital Service
</a>
</text>)
}
})