# Menu
Accessible dropdown and context menus for actions and navigation.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
);
}
```
## Grouped Items
Use `ItemGroup` and `ItemGroupLabel` to organize menu items into logical sections.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
export default function Group() {
return (
);
}
```
## Context Menu
Use `ContextTrigger` instead of `Trigger` to open the menu on right-click.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
export default function Context() {
return (
);
}
```
## Nested Menu
Use the `TriggerItem` component to create nested menus within a parent menu.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
import { ChevronRightIcon } from 'lucide-react';
export default function Nested() {
return (
);
}
```
## Option Items
Use `OptionItem` to create menu items that can be toggled on or off with checkbox or radio group like behavior.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
import { CheckIcon } from 'lucide-react';
import { useState } from 'react';
export default function Option() {
const sortOptions = [
{ value: 'newest', label: 'Newest' },
{ value: 'popular', label: 'Most Popular' },
{ value: 'rating', label: 'Highest Rated' },
];
const filterOptions = [
{ value: 'free-shipping', label: 'Free Shipping' },
{ value: 'in-stock', label: 'In Stock' },
{ value: 'on-sale', label: 'On Sale' },
];
const [sort, setSort] = useState('newest');
const [filters, setFilters] = useState(['free-shipping', 'in-stock']);
return (
);
}
```
## Disabled Item
Set the disabled prop to enable the disabled state.
```tsx
import { Menu, Portal } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
);
}
```
## Anatomy
Here's an overview of how the Menu component is structured in code:
```tsx
import { Menu } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference