Dropdown
A hover-triggered dropdown menu with grouped sections.
Import
import { Dropdown } from "@gumtree/ui/Dropdown" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger* | ComponentChildren | - | The element that triggers the dropdown on hover |
sections* | DropdownSection[] | - | Array of sections, each with an optional title and items |
align | "left" | "right" | "right" | Horizontal alignment of the dropdown |
Examples
With Sections
A dropdown with titled sections, like a create menu.
< Dropdown
trigger = {
< button class = "btn btn-sm bg-[var(--brand)] border-base-content text-base-content font-bold rounded-none" >
+
</ button >
}
sections = { [
{
title : "Create" ,
items : [
{ label : "New repository" , href : "#" } ,
{ label : "New organisation" , href : "#" } ,
] ,
} ,
{
title : "Import" ,
items : [
{ label : "Import repository" , href : "#" } ,
{ label : "Mirror repository" , href : "#" } ,
] ,
} ,
] }
/>