Skip to main content
All components

ComponentContents list

4 of 4 upstream examples match. Razor component: <NhsukContentsList>

Default

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-contents-list
    items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Getting diagnosed",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Living with AMD",
        },
    ])"
/>
Blazor 
<NhsukContentsList
    Items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Getting diagnosed",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Living with AMD",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/contents-list/macro.njk" import contentsList %}

{{ contentsList({
  "items": [
    {
      "href": "#",
      "text": "What is AMD?",
      "current": true
    },
    {
      "href": "#",
      "text": "Symptoms"
    },
    {
      "href": "#",
      "text": "Getting diagnosed"
    },
    {
      "href": "#",
      "text": "Treatments"
    },
    {
      "href": "#",
      "text": "Living with AMD"
    }
  ]
}) }}

With empty items

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-contents-list
    items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        null,
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        null,
    ])"
/>
Blazor 
<NhsukContentsList
    Items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        null,
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        null,
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/contents-list/macro.njk" import contentsList %}

{{ contentsList({
  "items": [
    {
      "href": "#",
      "text": "What is AMD?",
      "current": true
    },
    {
      "href": "#",
      "text": "Symptoms"
    },
    false,
    {
      "href": "#",
      "text": "Treatments"
    },
    false
  ]
}) }}

With nested lists

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-contents-list
    items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 1",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 2",
            Items = [
                new ContentsListItemsItem
                {
                    Href = "#",
                    Text = "Section 2.1",
                },
                new ContentsListItemsItem
                {
                    Href = "#",
                    Text = "Section 2.2",
                },
            ],
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 3",
        },
    ])"
/>
Blazor 
<NhsukContentsList
    Items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 1",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 2",
            Items = [
                new ContentsListItemsItem
                {
                    Href = "#",
                    Text = "Section 2.1",
                },
                new ContentsListItemsItem
                {
                    Href = "#",
                    Text = "Section 2.2",
                },
            ],
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Chapter 3",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/contents-list/macro.njk" import contentsList %}

{{ contentsList({
  "items": [
    {
      "href": "#",
      "text": "Chapter 1"
    },
    {
      "href": "#",
      "text": "Chapter 2",
      "items": [
        {
          "href": "#",
          "text": "Section 2.1"
        },
        {
          "href": "#",
          "text": "Section 2.2"
        }
      ]
    },
    {
      "href": "#",
      "text": "Chapter 3"
    }
  ]
}) }}

With visually hidden text

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-contents-list
    visually-hidden-text="Table of contents"
    items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Getting diagnosed",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Living with AMD",
        },
    ])"
/>
Blazor 
<NhsukContentsList
    VisuallyHiddenText="Table of contents"
    Items="@([
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "What is AMD?",
            Current = true,
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Symptoms",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Getting diagnosed",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Treatments",
        },
        new ContentsListItemsItem
        {
            Href = "#",
            Text = "Living with AMD",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/contents-list/macro.njk" import contentsList %}

{{ contentsList({
  "visuallyHiddenText": "Table of contents",
  "items": [
    {
      "href": "#",
      "text": "What is AMD?",
      "current": true
    },
    {
      "href": "#",
      "text": "Symptoms"
    },
    {
      "href": "#",
      "text": "Getting diagnosed"
    },
    {
      "href": "#",
      "text": "Treatments"
    },
    {
      "href": "#",
      "text": "Living with AMD"
    }
  ]
}) }}