` element | |\n\n# MenuSeparator\n\nMenuSeparator provides visual separation between menu items or groups.\n\n## Properties\n\nMenuSeparator accepts no props and renders a horizontal divider line.\n\n```tsx\nimport { MenuSeparator } from '@leafygreen-ui/menu';\n\n
;\n```\n\n# FocusableMenuItem\n\nFocusableMenuItem allows you to include interactive elements (like inputs) within menu items while maintaining proper keyboard navigation.\n\n## Properties\n\n| Prop | Type | Description | Default |\n| ----------- | ---------------------- | ------------------------------------------------------------- | ------- |\n| `children` | `ReactNode` | Interactive content to display within the focusable menu item | |\n| `className` | `string` | CSS class applied to the root element | |\n| ... | native `li` attributes | Any other props are spread to the root `
` element | |\n\n## Utilities\n\n### getLgIds\n\nThe `getLgIds` utility function generates consistent data-lgid values for menu components, useful for testing and automation.\n\n```tsx\nimport { getLgIds } from '@leafygreen-ui/menu';\n\nconst lgIds = getLgIds('my-menu');\n// Returns: {\n// root: 'my-menu',\n// item: 'my-menu-menu_item',\n// submenu: 'my-menu-submenu',\n// submenuToggle: 'my-menu-submenu_toggle'\n// }\n\n;\n```\n\n## Advanced Usage\n\n### Controlling Menu State\n\n```tsx\nfunction AdvancedMenuExample() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClose = () => {\n console.log('Menu closing');\n setIsOpen(false);\n };\n\n const shouldPreventClose = () => {\n // Only close if form is valid\n return isFormValid;\n };\n\n return (\n Advanced Menu}\n >\n \n \n );\n}\n```\n\n### Menu Positioning\n\n```tsx\n// Position relative to a custom element\nfunction PositionedMenu() {\n const triggerRef = useRef(null);\n\n return (\n <>\n Custom Trigger Element
\n \n \n );\n}\n```\n\n### Dynamic Menu Content\n\n```tsx\nfunction DynamicMenu({ items, onItemClick }) {\n return (\n \n );\n}\n```\n\n## Migration Notes\n\n### From v31 to v32\n\n- The `size` prop on `MenuItem` has been deprecated and no longer has any effect\n- Use `variant=\"compact\"` on the `Menu` component instead for smaller menu items\n- The deprecated portal-related props will be removed in a future version - migrate to `renderMode=\"top-layer\"`\n\n### Best Practices\n\n1. **Accessibility**: Always provide meaningful labels and ensure keyboard navigation works\n2. **Performance**: Use `shouldClose` callback to prevent unnecessary re-renders\n3. **Positioning**: Use `renderMode=\"top-layer\"` for better stacking context management\n4. **Testing**: Use the `getLgIds` utility for consistent test selectors\n\n## Browser Support\n\nThe Menu component supports all modern browsers. The `renderMode=\"top-layer\"` option requires browsers that support the [HTML `dialog` element](https://caniuse.com/dialog) and [CSS `@layer`](https://caniuse.com/css-cascade-layers). For older browsers, the component will automatically fall back to portal rendering.\n","readmeFilename":"README.md"}