Dropdown

Design Code

Simple Example

Click me Item 1 Item 2 
<nile-dropdown>
      <nile-button slot="trigger" caret >Click me to open the dropdown</nile-button>
      <nile-menu>
        <nile-menu-item>Item 1</nile-menu-item>
        <nile-menu-item>Item 2</nile-menu-item>
      </nile-menu>
</nile-dropdown>




Click me I am Random Text Just Like Nothing Please Select Above Text 
<style>
.custom-dropdown::part(panel){
  width:550px;
}

</style>  

<nile-dropdown class="custom-dropdown">
      <nile-button slot="trigger" caret >Click me</nile-button>
      <nile-menu>
        <nile-menu-item>I am Random Text Just Like Nothing</nile-menu-item>
        <nile-menu-item>Please Select Above Text</nile-menu-item>
      </nile-menu>
</nile-dropdown>

Add Footer Slot

Actions Menu Item 1 Menu Item 2 Menu Item 3 Menu Item 4 + Add Menu Item 5 
<nile-dropdown>
    <nile-button slot="trigger" caret>Actions</nile-button>
      <nile-menu searchEnabled="true">
          <nile-menu-item>Menu Item 1</nile-menu-item>
          <nile-menu-item>Menu Item 2</nile-menu-item>
          <nile-menu-item>Menu Item 3</nile-menu-item>
          <nile-menu-item>Menu Item 4</nile-menu-item>
          <span slot="menu__footer" style="margin: auto 0;">+ Add Menu Item 5</span>
    </nile-menu>
</nile-dropdown>

Emits

Name Description
(nile-select) Emitted when a menu item is selected.
(nile-search-value) Emits the value from the sticky nile input when searchEnabled and customSearch is true.

Slots

Name Description
(default) The dropdown’s main content.
trigger The dropdown’s trigger, usually a <nile-button> element.
base The component’s base wrapper.
trigger The container that wraps the trigger.
panel The panel that gets shown when the dropdown is open.

Properties

Name Description Type Default Value
open You can toggle this attribute to show and hide the dropdown. Boolean False
placement The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' bottom-start
disabled Disables the dropdown so the panel will not open. Boolean False
searchEnabled To have a sticky input box where you can filter the menu items till one hierarchy Boolean False
customSearch First Enable searchEnabled then if you want to have a emit of searc text you can use this Boolean False
stay-open-on-select By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions. Boolean False
distance The distance in pixels from which to offset the panel away from its trigger. Number 0
skidding The distance in pixels from which to offset the panel along its trigger. Number 0
hoist Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios Boolean false

Dependencie

This component automatically imports the following dependencies.

nile-popup