ComponentBreadcrumb

5 of 5 upstream examples match. Razor component: <NhsukBreadcrumb>

Default

Matches upstream

Razor Pages and MVC

<nhsuk-breadcrumb
    items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
        },
    ])"
/>

Blazor

<NhsukBreadcrumb
    Items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb %}

{{ breadcrumb({
  "items": [
    {
      "href": "#",
      "text": "Home"
    },
    {
      "href": "#",
      "text": "NHS services"
    },
    {
      "href": "#",
      "text": "Hospitals"
    }
  ]
}) }}

Attributes

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-breadcrumb
    id="with-attributes"
    items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
    ])"
    back-link-options="@(new BackLinkOptions
    {
        Id = "back-link-with-attributes",
        Attributes = new NhsukAttributes
        {
            ["lang"] = "en",
        },
    })"
/>

Blazor

<NhsukBreadcrumb
    Id="with-attributes"
    Items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
            Attributes = new NhsukAttributes
            {
                ["lang"] = "en",
            },
        },
    ])"
    BackLink="@(new BackLinkOptions
    {
        Id = "back-link-with-attributes",
        Attributes = new NhsukAttributes
        {
            ["lang"] = "en",
        },
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb %}

{{ breadcrumb({
  "id": "with-attributes",
  "items": [
    {
      "href": "#",
      "text": "Home",
      "attributes": {
        "lang": "en"
      }
    },
    {
      "href": "#",
      "text": "NHS services",
      "attributes": {
        "lang": "en"
      }
    },
    {
      "href": "#",
      "text": "Hospitals",
      "classes": "example-class-one example-class-two",
      "attributes": {
        "lang": "en"
      }
    }
  ],
  "backLink": {
    "id": "back-link-with-attributes",
    "attributes": {
      "lang": "en"
    }
  }
}) }}

Reverse

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-breadcrumb
    variant="reverse"
    items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
        },
    ])"
/>

Blazor

<NhsukBreadcrumb
    Variant="reverse"
    Items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "NHS services",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Hospitals",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb %}

{{ breadcrumb({
  "variant": "reverse",
  "items": [
    {
      "href": "#",
      "text": "Home"
    },
    {
      "href": "#",
      "text": "NHS services"
    },
    {
      "href": "#",
      "text": "Hospitals"
    }
  ]
}) }}

With back link as a button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-breadcrumb
    items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Search results",
        },
    ])"
    back-link-options="@(new BackLinkOptions
    {
        Type = "submit",
    })"
/>

Blazor

<NhsukBreadcrumb
    Items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Search results",
        },
    ])"
    BackLink="@(new BackLinkOptions
    {
        Type = "submit",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb %}

{{ breadcrumb({
  "items": [
    {
      "href": "#",
      "text": "Home"
    },
    {
      "href": "#",
      "text": "Search results"
    }
  ],
  "backLink": {
    "type": "submit"
  }
}) }}

With back link custom text

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-breadcrumb
    items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Advanced search",
        },
    ])"
    back-link-options="@(new BackLinkOptions
    {
        Text = "Search results",
        Href = "#",
    })"
/>

Blazor

<NhsukBreadcrumb
    Items="@([
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Home",
        },
        new BreadcrumbItemsItem
        {
            Href = "#",
            Text = "Advanced search",
        },
    ])"
    BackLink="@(new BackLinkOptions
    {
        Text = "Search results",
        Href = "#",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb %}

{{ breadcrumb({
  "items": [
    {
      "href": "#",
      "text": "Home"
    },
    {
      "href": "#",
      "text": "Advanced search"
    }
  ],
  "backLink": {
    "text": "Search results",
    "href": "#"
  }
}) }}