@manufosela/nav-list

@manufosela/nav-list

Horizontal navigation list web component with selection support. Built with Lit.

Installation

npm install @manufosela/nav-list

Usage

import '@manufosela/nav-list';

<nav-list id="menu" title="Select Option"></nav-list>

<script>
  const menu = document.getElementById('menu');
  menu.listValues = ['Option 1', 'Option 2', 'Option 3'];
  menu.addEventListener('navlist-changed', (e) => {
    console.log('Selected:', e.detail.value);
  });
</script>

Features

• Horizontal navigation list with selection
• Light DOM support (define items in HTML)
• Keyboard navigation (Enter/Space)
• External event control (next/previous)
• Fixed (read-only) mode
• CSS custom properties for theming
• Accessible (ARIA radiogroup)

Attributes

Attribute	Type	Default	Description
title	String	''	Title displayed above the list
selected	String	null	Currently selected value
fixed	Boolean	false	If true, selection is disabled
listen-events	Boolean	false	Listen for navlist-next/navlist-last events

Properties

Property	Type	Description
listValues	String[]	Array of values to display

Methods

Method	Description
-	Use events for programmatic control

Events

Event	Detail	Description
navlist-changed	{ value, pos, id }	Fired when selection changes

Light DOM Usage

Define items directly in HTML:

<nav-list title="Categories">
  <ul>
    <li>Electronics</li>
    <li>Clothing</li>
    <li>Books</li>
  </ul>
</nav-list>

Event-driven Navigation

Control selection programmatically:

<nav-list id="pages" listen-events></nav-list>

<script>
  // Go to next item
  document.dispatchEvent(new CustomEvent('navlist-next', {
    detail: { id: 'pages' }
  }));

  // Go to previous item
  document.dispatchEvent(new CustomEvent('navlist-last', {
    detail: { id: 'pages' }
  }));
</script>

CSS Custom Properties

Property	Default	Description
--nav-list-gap	5px	Gap between items
--nav-list-padding	10px 20px	Item padding
--nav-list-font-size	14px	Font size
--nav-list-letter-spacing	2px	Letter spacing
--nav-list-border-radius	4px	Border radius
--nav-list-border-color	transparent	Border color
--nav-list-bg	transparent	Background color
--nav-list-hover-bg	rgba(0,0,0,0.05)	Hover background
--nav-list-selected-border-color	#cc3743	Selected border color
--nav-list-selected-bg	transparent	Selected background
--nav-list-selected-color	inherit	Selected text color
--nav-list-focus-color	#3b82f6	Focus ring color
--nav-list-title-size	16px	Title font size
--nav-list-title-weight	700	Title font weight
--nav-list-title-color	inherit	Title color

Styling Examples

Pill Style

nav-list {
  --nav-list-selected-border-color: transparent;
  --nav-list-selected-bg: #3b82f6;
  --nav-list-selected-color: white;
  --nav-list-border-radius: 999px;
  --nav-list-padding: 8px 20px;
}

Underline Style

nav-list {
  --nav-list-border-radius: 0;
  --nav-list-selected-border-color: transparent;
  --nav-list-padding: 10px 16px;
}
nav-list .navlist__item--selected {
  border-bottom: 2px solid #3b82f6;
}

License

Apache-2.0