navody-digital-frontend
Version:
Navody.Digital Frontend contains the code you need to start building a user interface for navody.digital
193 lines • 9.92 kB
JSON
{
"component": "breadcrumbs",
"fixtures": [
{
"name": "default",
"options": {
"items": [
{
"text": "Section",
"href": "/section"
},
{
"text": "Sub-section",
"href": "/section/sub-section"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
"hidden": false
},
{
"name": "with one level",
"options": {
"items": [
{
"text": "Section",
"href": "/section"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n </ol>\n</div>",
"hidden": false
},
{
"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"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n \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 \n \n </ol>\n</div>",
"hidden": false
},
{
"name": "without the home section",
"options": {
"items": [
{
"text": "Service Manual",
"href": "/service-manual"
},
{
"text": "Agile Delivery",
"href": "/service-manual/agile-delivery"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n </li>\n \n \n </ol>\n</div>",
"hidden": false
},
{
"name": "with last breadcrumb as current page",
"options": {
"items": [
{
"text": "Home",
"href": "/"
},
{
"text": "Passports, travel and living abroad",
"href": "/browse/abroad"
},
{
"text": "Travel abroad"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \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 \n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n \n \n </ol>\n</div>",
"hidden": false
},
{
"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"
}
]
},
"html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n </li>\n \n \n \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 \n \n </ol>\n</div>",
"hidden": false
},
{
"name": "classes",
"options": {
"classes": "app-breadcrumbs--custom-modifier",
"items": [
{
"text": "Home"
}
]
},
"html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
"hidden": true
},
{
"name": "attributes",
"options": {
"attributes": {
"id": "my-navigation",
"role": "navigation"
},
"items": [
{
"text": "Home"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
"hidden": true
},
{
"name": "item attributes",
"options": {
"items": [
{
"text": "Section 1",
"href": "/section",
"attributes": {
"data-attribute": "my-attribute",
"data-attribute-2": "my-attribute-2"
}
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \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 \n \n </ol>\n</div>",
"hidden": true
},
{
"name": "html as text",
"options": {
"items": [
{
"text": "<span>Section 1</span>"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><span>Section 1</span></li>\n \n \n </ol>\n</div>",
"hidden": true
},
{
"name": "html",
"options": {
"items": [
{
"html": "<em>Section 1</em>"
},
{
"html": "<em>Section 2</em>",
"href": "/section-2"
}
]
},
"html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n </li>\n \n \n </ol>\n</div>",
"hidden": true
}
]
}