UNPKG

@neynar/ui

Version:

React UI component library built on shadcn/ui and Tailwind CSS

60 lines (48 loc) 1.44 kB
# 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> ```