Skip to main content
Design System in C#

Beta This is a new service.

Service navigation

Read more about the service navigation component on the Gov.UK Design System website

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkServiceNavigation(new ServiceNavigationViewModel
{
    NavigationItems = new List<ServiceNavigationItemViewModel>
    {
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 1"),
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 2"),
            Active = true
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 3"),
        },
    }
})

Options

Options for ServiceNavigationViewModel
Name Type Description
Classes List<string> Classes to add to the service navigation container.
Attributes Dictionary<string, string> HTML attributes (for example, data attributes) to add to the service navigation container.
AriaLabel string The text for the aria-label which labels the service navigation container when a service name is included. Defaults to "Service information".
MenuButtonText string The text of the mobile navigation menu toggle. Defaults to "Menu".
MenuButtonLabel string The screen reader label for the mobile navigation menu toggle. Defaults to the same value as MenuButtonText if not specified.
NavigationLabel string The screen reader label for the mobile navigation menu. Defaults to the same value as MenuButtonText if not specified.
NavigationId string The ID used to associate the mobile navigation toggle with the navigation menu. Defaults to navigation.
NavigationClasses string Classes to add to the navigation menu container.
CollapseNavigationOnMobile bool? Whether the navigation should be collapsed inside a menu on mobile. Defaults to true if there is more than one navigation item.
ServiceName string The name of your service.
ServiceUrl string The homepage of your service.
NavigationItems List<ServiceNavigationItemViewModel> Required. Used to add navigation to the service header. See options for ServiceNavigationItemViewModel
Slots ServiceNavigationSlotsViewModel Specified points for injecting custom HTML into the service header. See options for ServiceNavigationSlotsViewModel
Options for ServiceNavigationItemViewModel
Name Type Description
Current bool If true, indicates that the user is currently on this page. This takes precedence over Active.
Active bool If true, indicates that the user is within this group of pages in the navigation hierarchy.
HtmlOrText HtmlOrText Required. HTML or text for the navigation item.
Href string URL of the navigation item anchor.
Attributes Dictionary<string, string> HTML attributes (for example data attributes) to add to the navigation item anchor.
Options for ServiceNavigationSlotsViewModel
Name Type Description
Start HtmlOrText HTML injected at the start of the service header container.
End HtmlOrText HTML injected at the end of the service header container.
NavigationStart HtmlOrText HTML injected before the first list item in the navigation list. Requires NavigationItems to be set.
NavigationEnd HtmlOrText HTML injected after the last list item in the navigation list. Requires NavigationItems to be set.

Examples

Alongside the GOV.UK Header

See more details about the header component

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkHeader(new HeaderViewModel
{
    HomepageUrl = "#"
})

@await Html.GovUkServiceNavigation(new ServiceNavigationViewModel
{
    NavigationItems = new List<ServiceNavigationItemViewModel>
    {
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 1"),
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 2"),
            Active = true
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 3"),
        },
    }
})

Showing service name and navigation links

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkServiceNavigation(new ServiceNavigationViewModel
{
    ServiceName = "Design System in C#",
    ServiceUrl = "#",
    NavigationItems = new List<ServiceNavigationItemViewModel>
    {
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 1"),
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 2"),
            Active = true
        },
        new ServiceNavigationItemViewModel
        {
            Href = "#",
            HtmlOrText = new HtmlOrText("Navigation item 3"),
        },
    }
})