govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
259 lines (258 loc) • 12.7 kB
JSON
{
"component": "breadcrumbs",
"fixtures": [
{
"name": "default",
"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": "",
"pageTemplateOptions": {},
"screenshot": true,
"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": "with one level",
"options": {
"items": [
{
"text": "Section",
"href": "/section"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"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": "without the home section",
"options": {
"items": [
{
"text": "Service Manual",
"href": "/service-manual"
},
{
"text": "Agile Delivery",
"href": "/service-manual/agile-delivery"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"screenshot": true,
"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",
"pageTemplateOptions": {
"bodyClasses": "app-template__body--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": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"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\"><span>Section 1</span></a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><span>Section 2</span></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": "",
"pageTemplateOptions": {},
"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": "",
"pageTemplateOptions": {},
"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>"
}
]
}