Ecme - The Ultimate Next & TypeScript Web Template

Dropdown

Dropdown allow users select a single item from a list of options.

Default

Default usage of Dropdown

Custom Toggle

We can set custom toggler for Dropdown via renderTitle prop.

Trigger

Dropdown allow us to settrigger mode to click, hover or context.

Submenu

Dropdown can also have multiple levels.

Placement

Dropdown menu placement can be assign around the trigger element in different positions via placement prop.

Default Active

Set Dropdown.Item eventKey value to activeKey prop to highlight the Dropdown.Item active status.

Disabled

disabled prop can be use in both Dropdown or Dropdown.Item to disable user action.

Dropdown Item Type

Dropdown.Item has several variant type can br apply, Pass the variant prop and use either 'default', 'header', 'divider', 'default'

With RouterLink

Usage with RouterLink.

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.Item`to 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'`	-

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

'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

-

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

-

Prop

Description

Type

Default

title

Title for submenu

string | ReactNode

eventKey

The value of Dropdown submenu

string

placement

Placement where the Dropdown menu expand