npm package: @litforge/vertical-menu
Description: A vertical navigation menu component with collapsible sections, built with Lit.
Latest version: 0.1.22

# @litforge/vertical-menu

A vertical navigation menu component with collapsible sections, built with Lit.

## Overview

The `VerticalMenu` component provides a complete vertical navigation menu with:
- Collapsible/expandable functionality
- Logo support
- Nested menu items
- Active state management
- SPA mode support
- Fully customizable styling

## Installation

```bash
npm install @litforge/vertical-menu
# or
pnpm add @litforge/vertical-menu
# or
yarn add @litforge/vertical-menu
```

**Note**: This component depends on:
- `@litforge/menu-item`
- `@litforge/logo-img`

## Basic Usage

```html
<script type="module">
  import '@litforge/vertical-menu';
</script>

<vertical-menu
  items="${menuItems}"
  expanded
  show-toggle
></vertical-menu>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `items` | `VerticalMenuItem[]` | `undefined` | Menu items array |
| `expanded` | `boolean` | `false` | Expanded/collapsed state |
| `showToggle` | `boolean` | `false` | Shows expand/collapse toggle |
| `spaMode` | `boolean` | `false` | Enables SPA navigation mode |
| `width` | `string` | `undefined` | Menu width when expanded |
| `collapsedWidth` | `string` | `undefined` | Menu width when collapsed |
| `logoSrc` | `string` | `undefined` | Logo image source |
| `logoAlt` | `string` | `undefined` | Logo alt text |
| `logoSize` | `string` | `undefined` | Logo size |
| `logoRounded` | `boolean` | `false` | Rounded logo |
| `logoElevated` | `boolean` | `false` | Logo with shadow |
| `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 |

## Events

### `menu-toggle`

Fired when menu is expanded/collapsed.

```typescript
interface MenuToggleDetail {
  expanded: boolean;
}
```

### `menu-select`

Fired when a menu item is selected.

```typescript
interface MenuSelectDetail {
  item: VerticalMenuItem;
}
```

## Examples

### Basic Menu

```html
<vertical-menu
  items="${menuItems}"
  expanded
></vertical-menu>
```

### With Logo and Toggle

```html
<vertical-menu
  items="${menuItems}"
  logoSrc="/logo.png"
  logoAlt="Logo"
  showToggle
  expanded
></vertical-menu>
```

### SPA Mode

```html
<vertical-menu
  items="${menuItems}"
  spaMode
  expanded
  @menu-select="${handleMenuSelect}"
></vertical-menu>
```

## Styling

The component uses CSS variables for extensive theming:

```css
vertical-menu {
  --lf-vertical-menu-width: 256px;
  --lf-vertical-menu-collapsed-width: 64px;
  --lf-vertical-menu-background: #ffffff;
  --lf-vertical-menu-text-color: #111827;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { VerticalMenu } from '@litforge/vertical-menu';
import type { VerticalMenuProps, VerticalMenuItem, MenuSelectDetail } from '@litforge/vertical-menu';
```

## License

Part of the LitForge component library.