@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

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

<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.

interface MenuToggleDetail {
  expanded: boolean;
}

menu-select

Fired when a menu item is selected.

interface MenuSelectDetail {
  item: VerticalMenuItem;
}

Examples

Basic Menu

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

With Logo and Toggle

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

SPA Mode

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

Styling

The component uses CSS variables for extensive theming:

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

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

License

Part of the LitForge component library.