Menu and Menu Items

Intent

Validate that Menu acts as a vertical container for MenuItem children, and that each MenuItem renders its text and optional icon with the active and disabled states visually distinguishable.

What is being tested

• Menu as a container (similar to Column, but semantically a menu)
• MenuItem with text only
• MenuItem with text + icon
• active: true on one MenuItem — highlighted appearance
• disabled: true on one MenuItem — reduced opacity
• Separator inside a Menu to group items

Acceptance criteria

✓ No errors ✓ MenuItems stack vertically within the Menu ✓ Active MenuItem is visually highlighted (filled background) ✓ Disabled MenuItem has reduced opacity ✓ Icons appear left of the label text ✓ Separator line visible between menu sections

Example

Open in playground →

Screen {
  width: 700
  height: 600
  padding: 32

  Row {
    gap: 32

    Card {
      title: "Text-only menu"
      width: 200

      Menu {
        width: 100%
        MenuItem { text: "New file"   }
        MenuItem { text: "Open…"  active: true }
        MenuItem { text: "Save"       }
        Separator {}
        MenuItem { text: "Export as…" }
        MenuItem { text: "Print"  disabled: true }
      }
    }

    Card {
      title: "Menu with icons"
      width: 240

      Menu {
        width: 100%
        MenuItem { text: "Dashboard"  icon: "home"     active: true }
        MenuItem { text: "Analytics"  icon: "star"               }
        MenuItem { text: "Customers"  icon: "user"               }
        MenuItem { text: "Reports"    icon: "edit"               }
        Separator {}
        MenuItem { text: "Settings"   icon: "settings"           }
        MenuItem { text: "Help"       icon: "alert"   disabled: true }
      }
    }
  }
}

Preview