@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
60 lines (48 loc) • 1.44 kB
Markdown
# ContextMenuLabel
**Type**: component
ContextMenuLabel - A non-interactive label for menu sections Used to group related menu items and provide context. Labels are not focusable and serve as visual section headers within the menu. Helps organize menu content and improve accessibility.
## JSX Usage
```jsx
import { ContextMenuLabel } from '@neynar/ui';
<ContextMenuLabel
asChild={true}
inset={true}
className="value"
>
{/* Your content here */}
</ContextMenuLabel>
```
## Component Props
### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Merges props with child element instead of rendering wrapper
### inset
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to indent the label to align with inset items
### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling
### children
- **Type**: `React.ReactNode`
- **Required**: Yes
- **Description**: The text content of the label
## Examples
### Example 1
```tsx
<ContextMenuLabel>File Actions</ContextMenuLabel>
<ContextMenuSeparator />
<ContextMenuItem>Open</ContextMenuItem>
<ContextMenuItem>Save</ContextMenuItem>
```
### Example 2
```tsx
// With inset alignment for consistency
<ContextMenuContent>
<ContextMenuLabel inset>Edit Options</ContextMenuLabel>
<ContextMenuItem inset>Copy</ContextMenuItem>
<ContextMenuItem inset>Paste</ContextMenuItem>
</ContextMenuContent>
```