Breadcrumbs

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

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkBreadcrumbs(new BreadcrumbsViewModel
{
    Crumbs = new List<CrumbViewModel>
    {
        new CrumbViewModel
        {
            HtmlOrText = new HtmlOrText("Home"),
            Href = "/"
        },
        new CrumbViewModel
        {
            HtmlOrText = new HtmlOrText("Components"),
            Href = "/components"
        },
        new CrumbViewModel
        {
            HtmlOrText = new HtmlOrText("Breadcrumbs"),
        },
    }
})

Options

Options for BreadcrumbsViewModel

Name	Type	Description
Crumbs	List<CrumbViewModel>	Required. The items within the breadcrumbs. See options for CrumbViewModel
Classes	List<string>	Classes to add to the breadcrumbs container.
CollapseOnMobile	bool	When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the breadcrumbs container.
LabelText	string	Plain text label identifying the landmark to screen readers. Defaults to “Breadcrumb”.

Options for CrumbViewModel

Name	Type	Description
HtmlOrText	HtmlOrText	Required. HTML or text to use within the breadcrumbs item. Instantiate an HtmlOrText class either with a string (for text) or using the @<text></text> syntax for HTML.
Href	string	Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the individual crumb.