UNPKG

@neynar/ui

Version:

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

84 lines (73 loc) 1.88 kB
# SidebarMenuAction **Type**: component Secondary action button for sidebar menu items A compact action button positioned on the right side of menu items, providing secondary actions like edit, delete, or more options. Can be configured to show only on hover for cleaner interfaces or remain always visible for important actions. ## JSX Usage ```jsx import { SidebarMenuAction } from '@neynar/ui'; <SidebarMenuAction className="value" asChild={true} showOnHover={true} /> ``` ## Component Props ### className - **Type**: `string` - **Required**: No - **Description**: No description available ### asChild - **Type**: `boolean` - **Required**: No - **Description**: No description available ### showOnHover - **Type**: `boolean` - **Required**: No - **Description**: No description available ## Examples ### Example 1 ```tsx // Always visible action button <SidebarMenuItem> <SidebarMenuButton> <Folder /> <span>Projects</span> </SidebarMenuButton> <SidebarMenuAction> <MoreHorizontal className="h-4 w-4" /> </SidebarMenuAction> </SidebarMenuItem> ``` ### Example 2 ```tsx // Show only on hover <SidebarMenuItem> <SidebarMenuButton> <File /> <span>Document</span> </SidebarMenuButton> <SidebarMenuAction showOnHover> <Trash2 className="h-4 w-4" /> </SidebarMenuAction> </SidebarMenuItem> ``` ### Example 3 ```tsx // Custom action with asChild <SidebarMenuItem> <SidebarMenuButton> <Star /> <span>Favorites</span> </SidebarMenuButton> <SidebarMenuAction asChild> <DropdownMenu> <DropdownMenuTrigger> <MoreVertical className="h-4 w-4" /> </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuItem>Edit</DropdownMenuItem> <DropdownMenuItem>Delete</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </SidebarMenuAction> </SidebarMenuItem> ```