Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Command
- Collapsible
- Combobox
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Editor
- Input
- Input Group
- Label
- Loading Spinner
- Native Select
- Popover
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
Patterns
Context Menu
Displays a menu of actions at the user's pointer position.
Right-click this area
Actions
Component Code
<april:context-menu> <slot:trigger> <div class="flex min-h-32 max-w-md items-center justify-center rounded-lg border border-dashed p-4 text-sm text-muted-foreground"> Right-click this area </div> </slot:trigger> <slot:content class="w-48"> <april:context-menu-label>Actions</april:context-menu-label> <april:context-menu-separator /> <april:context-menu-item> <x-lucide-copy class="mr-2 size-4" /> Copy </april:context-menu-item> <april:context-menu-item> <x-lucide-pencil class="mr-2 size-4" /> Rename </april:context-menu-item> <april:context-menu-separator /> <april:context-menu-item class="text-destructive"> <x-lucide-trash-2 class="mr-2 size-4" /> Delete </april:context-menu-item> </slot:content></april:context-menu>
Component Code
<april:context-menu> <slot:trigger> <div class="flex min-h-32 max-w-md items-center justify-center rounded-lg border border-dashed p-4 text-sm text-muted-foreground"> Right-click this area </div> </slot:trigger> <slot:content class="w-48"> <april:context-menu-label>Actions</april:context-menu-label> <april:context-menu-separator /> <april:context-menu-item> <x-lucide-copy class="mr-2 size-4" /> Copy </april:context-menu-item> <april:context-menu-item> <x-lucide-pencil class="mr-2 size-4" /> Rename </april:context-menu-item> <april:context-menu-separator /> <april:context-menu-item class="text-destructive"> <x-lucide-trash-2 class="mr-2 size-4" /> Delete </april:context-menu-item> </slot:content></april:context-menu>
Put the context-menu target in the named
trigger slot. Put the repeatable menu items in the named
content slot. The default slot remains supported for existing code.
<april:context-menu> <slot:trigger><div class="p-8">Right-click here</div></slot:trigger> <slot:content> <april:context-menu-item>Copy</april:context-menu-item> <april:context-menu-item>Paste</april:context-menu-item> </slot:content></april:context-menu>
<april:context-menu> <slot:trigger><div class="p-8">Right-click here</div></slot:trigger> <slot:content> <april:context-menu-item>Copy</april:context-menu-item> <april:context-menu-item>Paste</april:context-menu-item> </slot:content></april:context-menu>
Use
context-menu-label and
context-menu-separator to organize larger menus. The menu closes after an item is selected, when Escape is pressed, or when the user clicks elsewhere.
Publishing Views
Use the following commands to publish these views:
php artisan april:publish context-menu
php artisan april:publish context-menu
php artisan april:publish context-menu-item
php artisan april:publish context-menu-item
php artisan april:publish context-menu-label
php artisan april:publish context-menu-label
php artisan april:publish context-menu-separator
php artisan april:publish context-menu-separator
php artisan april:publish --all
php artisan april:publish --all