` element | |
# MenuSeparator
MenuSeparator provides visual separation between menu items or groups.
## Properties
MenuSeparator accepts no props and renders a horizontal divider line.
```tsx
import { MenuSeparator } from '@leafygreen-ui/menu';
;
```
# FocusableMenuItem
FocusableMenuItem allows you to include interactive elements (like inputs) within menu items while maintaining proper keyboard navigation.
## Properties
| Prop | Type | Description | Default |
| ----------- | ---------------------- | ------------------------------------------------------------- | ------- |
| `children` | `ReactNode` | Interactive content to display within the focusable menu item | |
| `className` | `string` | CSS class applied to the root element | |
| ... | native `li` attributes | Any other props are spread to the root `
` element | |
## Utilities
### getLgIds
The `getLgIds` utility function generates consistent data-lgid values for menu components, useful for testing and automation.
```tsx
import { getLgIds } from '@leafygreen-ui/menu';
const lgIds = getLgIds('my-menu');
// Returns: {
// root: 'my-menu',
// item: 'my-menu-menu_item',
// submenu: 'my-menu-submenu',
// submenuToggle: 'my-menu-submenu_toggle'
// }
;
```
## Advanced Usage
### Controlling Menu State
```tsx
function AdvancedMenuExample() {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => {
console.log('Menu closing');
setIsOpen(false);
};
const shouldPreventClose = () => {
// Only close if form is valid
return isFormValid;
};
return (
);
}
```
### Menu Positioning
```tsx
// Position relative to a custom element
function PositionedMenu() {
const triggerRef = useRef(null);
return (
<>
Custom Trigger Element
);
}
```
### Dynamic Menu Content
```tsx
function DynamicMenu({ items, onItemClick }) {
return (
);
}
```
## Migration Notes
### From v31 to v32
- The `size` prop on `MenuItem` has been deprecated and no longer has any effect
- Use `variant="compact"` on the `Menu` component instead for smaller menu items
- The deprecated portal-related props will be removed in a future version - migrate to `renderMode="top-layer"`
### Best Practices
1. **Accessibility**: Always provide meaningful labels and ensure keyboard navigation works
2. **Performance**: Use `shouldClose` callback to prevent unnecessary re-renders
3. **Positioning**: Use `renderMode="top-layer"` for better stacking context management
4. **Testing**: Use the `getLgIds` utility for consistent test selectors
## Browser Support
The 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.
---
_Source: https://npm.io/package/@leafygreen-ui/menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._