The <luna-breadcrumb> component provides hierarchical navigation showing the user's location.
Paths
/lunadom/components/breadcrumb/breadcrumb.js REQUIRED
/lunadom/components/breadcrumb-item/breadcrumb-item.js REQUIRED
/lunadom/components/dropdown/dropdown.js
/lunadom/components/menu/menu.js
/lunadom/components/menu-item/menu-item.js
Example
Home
Products
Current Page
Standard Breadcrumb
Home
Products
Web Components
Breadcrumb
Functional Dropdown / Sub-menu
Project
•••
📁
Components
📁
Utilities
📁
Tests
⚙️
Settings
Other Files
README.md
Custom Separators (Global & Item)
/
Catalog
→
Electronics
Audio
Headphones
Icons & Prefix/Suffix Slots
🏠
Home
Settings
⚙️
Security
🔒
Customization
Slots
separator - Custom separator between items
prefix - Icon or content before item
suffix - Icon or content after item
Attributes
href - Link URL for breadcrumb item
CSS Variables
--luna-breadcrumb-separator-color - Separator color
Example Code
<!-- Standard Breadcrumb -->
<luna-breadcrumb>
<luna-breadcrumb-item href="#">Home</luna-breadcrumb-item>
<luna-breadcrumb-item href="#">Products</luna-breadcrumb-item>
<luna-breadcrumb-item href="#">Web Components</luna-breadcrumb-item>
<luna-breadcrumb-item>Breadcrumb</luna-breadcrumb-item>
</luna-breadcrumb>
<!-- Custom Separators -->
<luna-breadcrumb>
<span slot="separator">/</span>
<luna-breadcrumb-item href="#">Catalog</luna-breadcrumb-item>
<luna-breadcrumb-item href="#">
<span slot="separator">→</span>
Electronics
</luna-breadcrumb-item>
<luna-breadcrumb-item href="#">Audio</luna-breadcrumb-item>
<luna-breadcrumb-item>Headphones</luna-breadcrumb-item>
</luna-breadcrumb>
<!-- Icons & Prefix/Suffix Slots -->
<luna-breadcrumb>
<luna-breadcrumb-item href="#">
<span slot="prefix">🏠</span>
Home
</luna-breadcrumb-item>
<luna-breadcrumb-item href="#">
Settings
<span slot="suffix">⚙️</span>
</luna-breadcrumb-item>
<luna-breadcrumb-item>
Security
<span slot="prefix">🔒</span>
</luna-breadcrumb-item>
</luna-breadcrumb>
<!-- With Dropdown Menu -->
<luna-breadcrumb>
<luna-breadcrumb-item href="#">Project</luna-breadcrumb-item>
<luna-breadcrumb-item>
<luna-dropdown>
<span slot="trigger">Choose Folder</span>
<luna-menu>
<luna-menu-item>assets</luna-menu-item>
<luna-menu-item>docs</luna-menu-item>
</luna-menu>
</luna-dropdown>
Other Files
</luna-breadcrumb-item>
<luna-breadcrumb-item>README.md</luna-breadcrumb-item>
</luna-breadcrumb>