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
docs/components/breadcrumbs.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Breadcrumbs
Shows the current location in a navigational hierarchy.
```html
<noora-breadcrumbs>
<noora-breadcrumb-item href="/projects">Projects</noora-breadcrumb-item>
<noora-breadcrumb-item>Tuist</noora-breadcrumb-item>
</noora-breadcrumbs>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `style-variant` | `slash`, `arrow` | `"slash"` | Controls the separator style. |
## Properties
| Property | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array<Record<string, unknown>>` | `[]` | Defines breadcrumbs programmatically when declarative noora-breadcrumb-item children are not used. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-open-change` | `CustomEvent<{ index: number; open: boolean }>` | Emitted when a breadcrumb menu opens or closes. |
| `noora-select` | `CustomEvent<{ index: number; item: Record<string, unknown>; value: unknown }>` | Emitted when a breadcrumb menu item is selected. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | Declarative noora-breadcrumb-item children. |
## Styling parts
| Part | Description |
| --- | --- |
| `breadcrumbs` | The breadcrumb container. |
## Styles
Use slash or arrow separators between breadcrumb items.
```html
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
<noora-breadcrumb-item label="Products">
<noora-dropdown-item value="electronics">Electronics</noora-dropdown-item>
<noora-dropdown-item value="phones" selected>Phones</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
<noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
<noora-breadcrumb-item label="Products">
<noora-dropdown-item value="electronics">Electronics</noora-dropdown-item>
<noora-dropdown-item value="phones" selected>Phones</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>
</noora-breadcrumbs>
```
## Configurations
Breadcrumb paths can combine icons, avatars, links, and plain labels.
```html
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item avatar avatar-color="blue">Tuist</noora-breadcrumb-item>
<noora-breadcrumb-item label="iOS App" avatar avatar-color="green">
<noora-dropdown-item value="feature" avatar avatar-color="orange">Features</noora-dropdown-item>
<noora-dropdown-item value="auth" avatar avatar-color="purple" selected>Authentication</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item avatar avatar-color="red">Login Screen</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item icon="smart_home">Dashboard</noora-breadcrumb-item>
<noora-breadcrumb-item>Settings</noora-breadcrumb-item>
<noora-breadcrumb-item>Profile</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
<noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
<noora-breadcrumb-item>Documentation</noora-breadcrumb-item>
<noora-breadcrumb-item>Guides</noora-breadcrumb-item>
<noora-breadcrumb-item>Getting Started</noora-breadcrumb-item>
</noora-breadcrumbs>
```
## Badges
Add compact technology or category badges next to labels.
```html
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item avatar avatar-color="blue">Tuist</noora-breadcrumb-item>
<noora-breadcrumb-item label="iOS App" badge-label="Xcode" badge-color="focus">
<noora-dropdown-item value="ios" href="#" badge-label="Xcode" badge-color="focus" selected>iOS App</noora-dropdown-item>
<noora-dropdown-item value="android" href="#" badge-label="Gradle" badge-color="success">Android App</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>Cache</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item icon="smart_home">Organization</noora-breadcrumb-item>
<noora-breadcrumb-item label="Project">
<noora-dropdown-item value="alpha" href="#" badge-label="Xcode" badge-color="focus">Alpha</noora-dropdown-item>
<noora-dropdown-item value="beta" href="#" badge-label="Gradle" badge-color="success" selected>Beta</noora-dropdown-item>
<noora-dropdown-item value="gamma" href="#" badge-label="Xcode" badge-color="focus">Gamma</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>Settings</noora-breadcrumb-item>
</noora-breadcrumbs>
```
## Dropdowns
Attach selectable alternatives to any breadcrumb item.
```html
<noora-breadcrumbs style-variant="slash">
<noora-breadcrumb-item label="Organization" icon="smart_home">
<noora-dropdown-item value="team1">Team Alpha</noora-dropdown-item>
<noora-dropdown-item value="team2">Team Beta</noora-dropdown-item>
<noora-dropdown-item value="team3">Team Gamma</noora-dropdown-item>
<noora-dropdown-item value="team4" selected>Team Delta</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>Project X</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
<noora-breadcrumb-item avatar avatar-color="blue">Company</noora-breadcrumb-item>
<noora-breadcrumb-item label="Engineering">
<noora-dropdown-item value="backend" avatar avatar-color="red">Backend Team</noora-dropdown-item>
<noora-dropdown-item value="frontend" avatar avatar-color="green" selected>Frontend Team</noora-dropdown-item>
</noora-breadcrumb-item>
<noora-breadcrumb-item>React Components</noora-breadcrumb-item>
</noora-breadcrumbs>
```