Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/breadcrumbs.json
{
"name": "Breadcrumbs",
"tagName": "noora-breadcrumbs",
"elementClassName": "NooraBreadcrumbs",
"className": "noora-breadcrumbs",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Shows the current location in a navigational hierarchy.",
"usage": "<noora-breadcrumbs>\n <noora-breadcrumb-item href=\"/projects\">Projects</noora-breadcrumb-item>\n <noora-breadcrumb-item>Tuist</noora-breadcrumb-item>\n</noora-breadcrumbs>",
"previewLayout": "stack",
"attributes": [
{
"name": "style-variant",
"property": "styleVariant",
"type": "string",
"values": ["slash", "arrow"],
"default": "slash",
"description": "Controls the separator style."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines breadcrumbs programmatically when declarative noora-breadcrumb-item children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-breadcrumb-item children."
}
],
"cssParts": [
{
"name": "breadcrumbs",
"description": "The breadcrumb container."
}
],
"events": [
{
"name": "noora-open-change",
"type": "CustomEvent<{ index: number; open: boolean }>",
"description": "Emitted when a breadcrumb menu opens or closes."
},
{
"name": "noora-select",
"type": "CustomEvent<{ index: number; item: Record<string, unknown>; value: unknown }>",
"description": "Emitted when a breadcrumb menu item is selected."
}
],
"notes": [],
"examples": [
{
"id": "styles",
"title": "Styles",
"description": "Use slash or arrow separators between breadcrumb items.",
"markup": "<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item icon=\"smart_home\">Home</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"Products\">\n <noora-dropdown-item value=\"electronics\">Electronics</noora-dropdown-item>\n <noora-dropdown-item value=\"phones\" selected>Phones</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>\n</noora-breadcrumbs>\n<noora-breadcrumbs style-variant=\"arrow\">\n <noora-breadcrumb-item icon=\"smart_home\">Home</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"Products\">\n <noora-dropdown-item value=\"electronics\">Electronics</noora-dropdown-item>\n <noora-dropdown-item value=\"phones\" selected>Phones</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>\n</noora-breadcrumbs>"
},
{
"id": "configurations",
"title": "Configurations",
"description": "Breadcrumb paths can combine icons, avatars, links, and plain labels.",
"markup": "<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item avatar avatar-color=\"blue\">Tuist</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"iOS App\" avatar avatar-color=\"green\">\n <noora-dropdown-item value=\"feature\" avatar avatar-color=\"orange\">Features</noora-dropdown-item>\n <noora-dropdown-item value=\"auth\" avatar avatar-color=\"purple\" selected>Authentication</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item avatar avatar-color=\"red\">Login Screen</noora-breadcrumb-item>\n</noora-breadcrumbs>\n<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item icon=\"smart_home\">Dashboard</noora-breadcrumb-item>\n <noora-breadcrumb-item>Settings</noora-breadcrumb-item>\n <noora-breadcrumb-item>Profile</noora-breadcrumb-item>\n</noora-breadcrumbs>\n<noora-breadcrumbs style-variant=\"arrow\">\n <noora-breadcrumb-item icon=\"smart_home\">Home</noora-breadcrumb-item>\n <noora-breadcrumb-item>Documentation</noora-breadcrumb-item>\n <noora-breadcrumb-item>Guides</noora-breadcrumb-item>\n <noora-breadcrumb-item>Getting Started</noora-breadcrumb-item>\n</noora-breadcrumbs>"
},
{
"id": "badges",
"title": "Badges",
"description": "Add compact technology or category badges next to labels.",
"markup": "<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item avatar avatar-color=\"blue\">Tuist</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"iOS App\" badge-label=\"Xcode\" badge-color=\"focus\">\n <noora-dropdown-item value=\"ios\" href=\"#\" badge-label=\"Xcode\" badge-color=\"focus\" selected>iOS App</noora-dropdown-item>\n <noora-dropdown-item value=\"android\" href=\"#\" badge-label=\"Gradle\" badge-color=\"success\">Android App</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>Cache</noora-breadcrumb-item>\n</noora-breadcrumbs>\n<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item icon=\"smart_home\">Organization</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"Project\">\n <noora-dropdown-item value=\"alpha\" href=\"#\" badge-label=\"Xcode\" badge-color=\"focus\">Alpha</noora-dropdown-item>\n <noora-dropdown-item value=\"beta\" href=\"#\" badge-label=\"Gradle\" badge-color=\"success\" selected>Beta</noora-dropdown-item>\n <noora-dropdown-item value=\"gamma\" href=\"#\" badge-label=\"Xcode\" badge-color=\"focus\">Gamma</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>Settings</noora-breadcrumb-item>\n</noora-breadcrumbs>"
},
{
"id": "dropdowns",
"title": "Dropdowns",
"description": "Attach selectable alternatives to any breadcrumb item.",
"markup": "<noora-breadcrumbs style-variant=\"slash\">\n <noora-breadcrumb-item label=\"Organization\" icon=\"smart_home\">\n <noora-dropdown-item value=\"team1\">Team Alpha</noora-dropdown-item>\n <noora-dropdown-item value=\"team2\">Team Beta</noora-dropdown-item>\n <noora-dropdown-item value=\"team3\">Team Gamma</noora-dropdown-item>\n <noora-dropdown-item value=\"team4\" selected>Team Delta</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>Project X</noora-breadcrumb-item>\n</noora-breadcrumbs>\n<noora-breadcrumbs style-variant=\"arrow\">\n <noora-breadcrumb-item avatar avatar-color=\"blue\">Company</noora-breadcrumb-item>\n <noora-breadcrumb-item label=\"Engineering\">\n <noora-dropdown-item value=\"backend\" avatar avatar-color=\"red\">Backend Team</noora-dropdown-item>\n <noora-dropdown-item value=\"frontend\" avatar avatar-color=\"green\" selected>Frontend Team</noora-dropdown-item>\n </noora-breadcrumb-item>\n <noora-breadcrumb-item>React Components</noora-breadcrumb-item>\n</noora-breadcrumbs>"
}
]
}