Nav List
Horizontal navigation list with keyboard support and event-driven control.
Basic Usage
Click items to select them.
Selected: none
<nav-list title="Select Option" .listValues="${['Option 1', 'Option 2', 'Option 3']}"></nav-list>
Light DOM Items
Define items using HTML.
- Electronics
- Clothing
- Books
- Home
Selected: none
<nav-list title="Categories">
<ul>
<li>Electronics</li>
<li>Clothing</li>
<li>Books</li>
</ul>
</nav-list>
Pre-selected Value
Set initial selection with the selected attribute.
Selected: Medium
<nav-list selected="Medium" .listValues="${['Small', 'Medium', 'Large']}"></nav-list>
Fixed (Read-only)
Display-only, no interaction.
<nav-list fixed selected="Active" .listValues="${['Active', 'Inactive']}"></nav-list>
Event-driven Navigation
Control selection via external events.
Selected: Page 1
<nav-list id="events" listen-events></nav-list>
document.dispatchEvent(new CustomEvent('navlist-next', { detail: { id: 'events' } }));
Custom Styling - Purple
nav-list {
--nav-list-selected-border-color: #8b5cf6;
--nav-list-border-radius: 20px;
--nav-list-hover-bg: rgba(139, 92, 246, 0.1);
}
Custom Styling - Pills
nav-list {
--nav-list-selected-bg: #3b82f6;
--nav-list-selected-color: white;
--nav-list-border-radius: 999px;
}