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/sidebar.json
{
"name": "Sidebar",
"tagName": "noora-sidebar",
"elementClassName": "NooraSidebar",
"className": "noora-sidebar",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Provides responsive side navigation.",
"usage": "<noora-sidebar>\n <noora-sidebar-item href=\"/\" icon=\"dashboard\">Dashboard</noora-sidebar-item>\n</noora-sidebar>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "Primary navigation",
"description": "Sets the accessible navigation label."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines navigation programmatically when declarative sidebar children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-sidebar-item and noora-sidebar-group children."
}
],
"cssParts": [
{
"name": "sidebar",
"description": "The sidebar container."
},
{
"name": "viewport",
"description": "The scrollable navigation viewport."
}
],
"notes": [],
"examples": [
{
"id": "navigation",
"title": "Navigation",
"description": "Provide structured navigation items.",
"markup": "<noora-sidebar>\n <noora-sidebar-item href=\"/\" icon=\"dashboard\" selected>Dashboard</noora-sidebar-item>\n <noora-sidebar-group label=\"Projects\" default-open>\n <noora-sidebar-item href=\"/projects/tuist\">Tuist</noora-sidebar-item>\n <noora-sidebar-item href=\"/projects/noora\">Noora</noora-sidebar-item>\n </noora-sidebar-group>\n</noora-sidebar>"
}
]
}