Skip to main content

DropdownButton

See the Button component for more detailed button props and examples.

Result
Loading...
Live Editor
<DropdownButton title="Fruit">
	<Dropdown.Item onClick={() => console.log('Apple')}>Apple</Dropdown.Item>
	<Dropdown.Item onClick={() => console.log('Banana')}>Banana</Dropdown.Item>
	<Dropdown.Item onClick={() => console.log('Cantaloupe')}>Cantaloupe</Dropdown.Item>
</DropdownButton>

Use the menuSize prop to control the sizing of the menu (sm, md, lg, or xl). It applies the corresponding dropdown-menu-{size} class to the menu. It defaults to md.

Result
Loading...
Live Editor
<DropdownButton title="Fruit" menuSize="lg">
	<Dropdown.Item onClick={() => console.log('Apple')}>Apple</Dropdown.Item>
	<Dropdown.Item onClick={() => console.log('Banana')}>Banana</Dropdown.Item>
	<Dropdown.Item onClick={() => console.log('Cantaloupe')}>Cantaloupe</Dropdown.Item>
</DropdownButton>

Analytics​

The DropdownButton component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'DropdownButton',
	actions: {
		onClick: { type: 'DROPDOWNBUTTON_CLICK', payload: 'Click' },
	},
};

Props​