Dropdown
Dropdown allow users select a single item from a list of options.
Default
Default usage of Dropdown
Click Me!
Custom Toggle
We can set custom toggler for Dropdown via
renderTitle prop.Trigger
Dropdown allow us to set
trigger mode to click, hover or context.Click
Hover
Right Click
Placement
Dropdown menu placement can be assign around the trigger element in different positions via
placement prop.Top start
Top center
Top end
Bottom start
Bottom center
Bottom end
Right start
Right center
Right end
Left start
Left center
Left end
Default Active
Set Dropdown.Item eventKey value to
activeKey prop to highlight the Dropdown.Item active status.Click Me!
Click Me!
Disabled
disabled prop can be use in both Dropdown or Dropdown.Item to disable user action.Click Me!
Click Me!
Dropdown Item Type
Dropdown.Item has several variant type can br apply, Pass the variant prop and use either
'default', 'header', 'divider', 'default' Click Me!
With RouterLink
Usage with RouterLink.
Click Me!
API
Dropdown
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Dropdown title | string | - |
| renderTitle | Custom Dropdown title | ReactNode | - |
| trigger | Trigger mode of Dropdown | 'click' | 'hover' | 'context' | 'click' |
| placement | Placement where the Dropdown menu expand | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'middle-start-top'| 'middle-start-bottom' | 'middle-end-top'| 'middle-end-bottom' | 'bottom-start' |
| menuClass | Additional class for dropdown menu (! modifier recommended for tailwind css overiding) | string | - |
| menuStyle | Additional styles for dropdown menu | object | - |
| toggleClassName | Additional class dropdown toggle (! modifier recommended for tailwind css overiding) | string | - |
| disabled | Whether to disable Dropdown expand | boolean | - |
| activeKey | Mark corresponded Dropdown.Itemto active by matching it eventkey prop | string | - |
| onClick | Callback when Dropdown toggle is clicked | (e: MouseEvent) => void | - |
| onMouseEnter | Callback when Dropdown toggle is on mouse enter | (e: MouseEvent) => void | - |
| onMouseLeave | Callback when Dropdown toggle is on mouse leave | (e: MouseEvent) => void | - |
| onContextMenu | Callback when Dropdown toggle is right clicked | (e: MouseEvent) => void | - |
| onSelect | Callback when Dropdown item is clicked | (e: MouseEvent) => void | - |
| onOpen | Callback when Dropdown is open | () => void | - |
| onClose | Callback when Dropdown is close | () => void | - |
| onToggle | Callback when Dropdown is open or close | (open: boolean) => void | - |
Dropdown.Item
| Prop | Description | Type | Default |
|---|---|---|---|
| active | Whether active current Dropdown Item | boolean | - |
| disabled | Whether disabled current Dropdown Item | boolean | - |
| variant | Define the type of Dropdown Item | 'default' | 'header' | 'divider' | 'custom' | - |
| eventKey | The value of Dropdown Item | string | - |
| onClick | Callback when Dropdown Item is clicked | () => void | - |
| onSelect | Callback when Dropdown Item is clicked | (eventKey: string, e: MouseEvent) => void | - |
Dropdown.Menu
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Title for submenu | string | ReactNode | - |
| eventKey | The value of Dropdown submenu | string | - |
| placement | Placement where the Dropdown menu expand | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'middle-start-top'| 'middle-start-bottom' | 'middle-end-top'| 'middle-end-bottom' | - |