ComponentBreadcrumb

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

Showing the examples from upstream's review app. Show 1 more test-only examples

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"
    }
  ]
}) }}

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": "#"
  }
}) }}