@litforge/horizontal-menu

A horizontal navigation menu component with dropdown submenus, built with Lit.

Overview

The HorizontalMenu component provides a complete horizontal navigation menu with:

• Dropdown submenus on hover/click
• Active state management
• SPA mode support
• Fully customizable styling
• Role-based filtering

Installation

npm install @litforge/horizontal-menu
# or
pnpm add @litforge/horizontal-menu
# or
yarn add @litforge/horizontal-menu

Note: This component depends on:

• @litforge/menu-item

Basic Usage

<script type="module">
  import '@litforge/horizontal-menu';
</script>

<horizontal-menu
  .items="${menuItems}"
  spa-mode
></horizontal-menu>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | items | VerticalMenuItem[] | undefined | Menu items array | | spaMode | boolean | false | Enables SPA navigation mode | | background | string | undefined | Menu background color | | textColor | string | undefined | Text color | | accentColor | string | undefined | Accent color | | activeBackground | string | undefined | Active item background | | activeText | string | undefined | Active item text color | | userRoles | string[] | [] | User roles for filtering | | isStaff | boolean | false | Staff flag for filtering |

Events

menu-select

Fired when a menu item is selected.

interface MenuSelectDetail {
  item: VerticalMenuItem;
}

CSS Variables

--lf-horizontal-menu-bg: #ffffff
--lf-horizontal-menu-text: #0f172a
--lf-horizontal-menu-muted: #64748b
--lf-horizontal-menu-accent: #0b6efd
--lf-horizontal-menu-active-bg: rgba(11, 110, 253, 0.12)
--lf-horizontal-menu-active-text: #0b6efd
--lf-horizontal-menu-hover-bg: rgba(15, 23, 42, 0.08)
--lf-horizontal-menu-dropdown-bg: #ffffff
--lf-horizontal-menu-dropdown-border: rgba(15, 23, 42, 0.1)
--lf-horizontal-menu-dropdown-shadow: 0 10px 40px rgba(15, 23, 42, 0.15)