lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

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>