@litforge/menu-item

A menu item component for use in navigation menus, built with Lit.

Overview

The MenuItem component provides a flexible menu item with support for icons, badges, nested items, and active states.

Installation

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

Basic Usage

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

<menu-item
  label="Dashboard"
  href="/dashboard"
  icon="home"
></menu-item>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | undefined | Menu item label | | href | string | undefined | Link URL | | icon | string | undefined | Icon identifier or SVG | | badge | string \| number | undefined | Badge text or number | | active | boolean | false | Active state | | disabled | boolean | false | Disabled state | | items | VerticalMenuItem[] | undefined | Nested menu items |

Examples

Basic Menu Item

<menu-item label="Home" href="/"></menu-item>

With Icon and Badge

<menu-item
  label="Messages"
  href="/messages"
  icon="envelope"
  badge="5"
></menu-item>

Active State

<menu-item
  label="Dashboard"
  href="/dashboard"
  active
></menu-item>

TypeScript

import { MenuItem } from '@litforge/menu-item';
import type { VerticalMenuItem } from '@litforge/menu-item';

const item: VerticalMenuItem = {
  label: 'Dashboard',
  href: '/dashboard',
  icon: 'home',
  active: true
};

License

Part of the LitForge component library.