govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{
    "component": "breadcrumbs",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "items": [
                    {
                        "text": "Section",
                        "href": "/section"
                    },
                    {
                        "text": "Sub-section",
                        "href": "/section/sub-section"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "with one level",
            "options": {
                "items": [
                    {
                        "text": "Section",
                        "href": "/section"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "with multiple levels",
            "options": {
                "items": [
                    {
                        "text": "Home",
                        "href": "/"
                    },
                    {
                        "text": "Section",
                        "href": "/section"
                    },
                    {
                        "text": "Sub-section",
                        "href": "/section/sub-section"
                    },
                    {
                        "text": "Sub Sub-section",
                        "href": "/section/sub-section/sub-sub-section"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "without the home section",
            "options": {
                "items": [
                    {
                        "text": "Service Manual",
                        "href": "/service-manual"
                    },
                    {
                        "text": "Agile Delivery",
                        "href": "/service-manual/agile-delivery"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "with last breadcrumb as current page",
            "options": {
                "items": [
                    {
                        "text": "Home",
                        "href": "/"
                    },
                    {
                        "text": "Passports, travel and living abroad",
                        "href": "/browse/abroad"
                    },
                    {
                        "text": "Travel abroad"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</nav>"
        },
        {
            "name": "with collapse on mobile",
            "options": {
                "collapseOnMobile": true,
                "items": [
                    {
                        "text": "Home",
                        "href": "/"
                    },
                    {
                        "text": "Education, training and skills",
                        "href": "/education"
                    },
                    {
                        "text": "Special educational needs and disability (SEND) and high needs",
                        "href": "/education/special-educational-needs-and-disability-send-and-high-needs"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "inverse",
            "options": {
                "classes": "govuk-breadcrumbs--inverse",
                "items": [
                    {
                        "text": "Home",
                        "href": "/"
                    },
                    {
                        "text": "Passports, travel and living abroad",
                        "href": "/browse/abroad"
                    },
                    {
                        "text": "Travel abroad"
                    }
                ]
            },
            "hidden": false,
            "description": "Breadcrumbs that appear on dark backgrounds",
            "previewLayoutModifiers": [
                "inverse"
            ],
            "screenshot": true,
            "html": "<nav class=\"govuk-breadcrumbs govuk-breadcrumbs--inverse\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</nav>"
        },
        {
            "name": "classes",
            "options": {
                "classes": "app-breadcrumbs--custom-modifier",
                "items": [
                    {
                        "text": "Home"
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</nav>"
        },
        {
            "name": "attributes",
            "options": {
                "attributes": {
                    "id": "my-navigation",
                    "data-foo": "bar"
                },
                "items": [
                    {
                        "text": "Home"
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" id=\"my-navigation\" data-foo=\"bar\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</nav>"
        },
        {
            "name": "item attributes",
            "options": {
                "items": [
                    {
                        "text": "Section 1",
                        "href": "/section",
                        "attributes": {
                            "data-attribute": "my-attribute",
                            "data-attribute-2": "my-attribute-2"
                        }
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "html as text",
            "options": {
                "items": [
                    {
                        "text": "<span>Section 1</span>",
                        "href": "/section-1"
                    },
                    {
                        "text": "<span>Section 2</span>"
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\">&lt;span&gt;Section 1&lt;/span&gt;</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 2&lt;/span&gt;</li>\n  </ol>\n</nav>"
        },
        {
            "name": "html",
            "options": {
                "items": [
                    {
                        "html": "<em>Section 1</em>",
                        "href": "/section-1"
                    },
                    {
                        "html": "<em>Section 2</em>",
                        "href": "/section-2"
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\"><em>Section 1</em></a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n  </ol>\n</nav>"
        },
        {
            "name": "custom label",
            "options": {
                "labelText": "Briwsion bara",
                "items": [
                    {
                        "text": "Hafan",
                        "href": "/"
                    },
                    {
                        "text": "Sefydliadau",
                        "href": "/organisations"
                    }
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Briwsion bara\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Hafan</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/organisations\">Sefydliadau</a>\n    </li>\n  </ol>\n</nav>"
        }
    ]
}