Dropdown

<sc-dropdown></sc-dropdown>

Dropdown is a component that opens a floating content panel when a trigger element is clicked. This components takes care of updating the state of the dropdown menu (opened/closed) as well as handles closing the menu when clicking outside.

Preview
Code

<sc-dropdown>
	<sc-button slot="trigger" caret>
		Click Here
	</sc-button>
	<sc-menu>
		<sc-menu-item>Option 1</sc-menu-item>
		<sc-menu-item>Option 2</sc-menu-item>
		<sc-menu-item>Option 3</sc-menu-item>
		<sc-menu-divider></sc-menu-divider>
		<sc-menu-item checked>Checked</sc-menu-item>
		<sc-menu-item disabled>Disabled</sc-menu-item>
		<sc-menu-divider></sc-menu-divider>
		<sc-menu-item>
		<span slot="prefix">👍🏻</span>Prefix
		</sc-menu-item>
		<sc-menu-item>
		Suffix <span slot="suffix">👍🏻</span>
		</sc-menu-item>
	</sc-menu>
</sc-dropdown>

Click Here

Option 1

Option 2

Option 3

Checked

Disabled

👍🏻Prefix

Suffix 👍🏻

Examples

Position

Preview
Code

<sc-dropdown placement="top-left">
  <sc-button slot="trigger" caret>Edit</sc-button>
  <sc-menu>
    <sc-menu-item>Cut</sc-menu-item>
    <sc-menu-item>Copy</sc-menu-item>
    <sc-menu-item>Paste</sc-menu-item>
    <sc-menu-divider></sc-menu-divider>
    <sc-menu-item>Find</sc-menu-item>
    <sc-menu-item>Replace</sc-menu-item>
  </sc-menu>
</sc-dropdown>

Edit

Cut

Copy

Paste

Find

Replace

Component Codex

Properties

Property	Description	Type	Default
clickEl		`HTMLElement`
closeOnSelect	Determines whether the dropdown should hide when a menu item is selected	`boolean`	true
disabled	Is this disabled.	`boolean`
distance	The distance in pixels from which to offset the panel away from its trigger.	`number`	10
hoist	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`.	`boolean`	false
open	Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.	`boolean`	false
placement	The placement of the dropdown.	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"`	'bottom-start'
position	The placement of the dropdown panel	`"bottom-left" \| "bottom-right" \| "top-left" \| "top-right"`
skidding	The distance in pixels from which to offset the panel along its trigger.	`number`	0

Events

Event	Description	Type
`scHide`	Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.	CustomEvent`<void>`
`scShow`	Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.	CustomEvent`<void>`

Shadow Parts

Part	Description
`base`	The elements base wrapper.
`panel`	The panel.
`trigger`	The trigger.

Dropdown

Examples​

Position​

Component Codex​