# Menu

## Visual Structure

```
ga-menu
  ├── ga-menu__title (optional)
  ├── ga-menu__item [--selected|--disabled|--active]
  │   ├── ga-menu__item-icon (optional)
  │   └── ga-menu__item-content
  │       ├── ga-menu__item-title (optional)
  │       │   ├── ga-menu__item-label
  │       │   └── ga-menu__item-shortcut (optional)
  │       └── ga-menu__item-description (optional)
  └── ga-menu__separator (optional)
```

## Elements Hierarchy

### Core Block

- `ga-menu` - Main container for the entire menu component

### Mandatory Elements

- `ga-menu__title` - The heading/title of the menu section
- `ga-menu__item` - Individual clickable/interactive menu option
- `ga-menu__item-content` - Container for all text content within a menu item
- `ga-menu__item-label` - The primary text label identifying the menu action

### Optional Elements

- `ga-menu__item-icon` - Icon displayed within a menu item for visual identification
- `ga-menu__item-title` - Wrapper that groups the label and shortcut when both are present
- `ga-menu__item-shortcut` - Visual representation of keyboard shortcut/hotkey
- `ga-menu__item-description` - Additional explanatory text providing context for the menu item
- `ga-menu__separator` - Horizontal divider that visually separates groups of related menu items

### Modifiers

- `ga-menu__item--selected` - Indicates the currently selected menu item
- `ga-menu__item--disabled` - Styles the menu item as disabled/non-interactive
- `ga-menu__item--disabled ga-menu__item--selected` - Combined state for a selected but disabled item
- `ga-menu__item--active` - Indicates the menu item is currently active/focused through keyboard

## Examples

### Basic

```html
<div class="ga-menu">
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Settings</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Title

```html
<div class="ga-menu">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Settings</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Separator

```html
<div class="ga-menu">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Settings</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <div class="ga-menu__separator"></div>
  <button class="ga-menu__item">
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Icons

```html
<div class="ga-menu">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Settings</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <div class="ga-menu__separator"></div>
  <button class="ga-menu__item">
    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Shortcut

```html
<div class="ga-menu max-w-50">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-title">
        <div class="ga-menu__item-label">Settings</div>
        <span class="ga-menu__item-shortcut">⌘ ⌥ S</span>
      </div>
      <div class="ga-menu__item-description">
        Configure your account preferences and adjust application display
        options
      </div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <div class="ga-menu__separator"></div>
  <button class="ga-menu__item">
    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Description

```html
<div class="ga-menu max-w-50">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Settings</div>
      <div class="ga-menu__item-description">
        Configure your account preferences and adjust application display
        options
      </div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <div class="ga-menu__separator"></div>
  <button class="ga-menu__item">
    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### With Sub Menu

```html
<div class="ga-menu">
  <div class="ga-menu__title">My menu</div>
  <button class="ga-menu__item">
    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Copy</div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-title">
        <div class="ga-menu__item-label">Settings</div>
        <!-- icon: chevron-right, size=16, class="ga-menu__item-icon" -->
      </div>
    </div>
  </button>
  <button class="ga-menu__item">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Delete</div>
    </div>
  </button>
  <div class="ga-menu__separator"></div>
  <button class="ga-menu__item">
    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Sign out</div>
    </div>
  </button>
</div>
```

### Statuses

```html
<div class="ga-menu">
  <button class="ga-menu__item">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Default</div>
    </div>
  </button>
  <button class="ga-menu__item ga-menu__item--selected">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Selected</div>
    </div>
  </button>
  <button class="ga-menu__item ga-menu__item--active">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Active (focused)</div>
    </div>
  </button>
  <button class="ga-menu__item ga-menu__item--disabled" disabled="">
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Disabled</div>
    </div>
  </button>
  <button
    class="ga-menu__item ga-menu__item--disabled ga-menu__item--selected"
    disabled=""
  >
    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
    <div class="ga-menu__item-content">
      <div class="ga-menu__item-label">Disabled Selected</div>
    </div>
  </button>
</div>
```