Examples

Props

NameDescriptionTypeRequiredDefault
modelValuewhen true Dropdown will be openBooleanfalse-
coverwhen true Dropdown will cover triggering elementBooleanfalse-
rightwhen true Dropdown will try to align to the rightBooleanfalse-
standardwhen true Dropdown appear in the standard widthBooleanfalse-

Events

  • update:modelValue - emitted when modelValue updates

Slots

  • default - slot to put Dropdown items in
  • trigger - slot to put trigger in, typically a button. This slot is scoped, it provides attrs and on which should be passed to v-bind and v-on respectively. See the examples.

data-ref-ids

  • feather-dropdown-container - the root container
  • feather-dropdown-container-dropdown - the container div for the dropdown contents, note this uses our layering system and will be present as an immediate child of the body tag

You can configure the Dropdown menu height by setting the height style for .feather-dropdown. Out of the box the height is configured to allow up to 6 rows before scrolling. We have provided a mixin for you to easily configure the height of the menu.

The following example allows 10 items to be displayed before scrolling.

@import "@featherds/dropdown/scss/mixins";

.my-component :deep(.feather-dropdown) {
  @include dropdown-menu-height(10);
}

Props

NameDescriptionTypeRequiredDefault
disabledwhen true dropdown item will be disabledBooleanfalse-

Events

  • update:modelValue - emitted when modelValue updates

Slots

  • default - slot to put text in
  • icon - slot to put icon in