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>
Nested Dropdown
Select Country
United States
California
Los Angeles
Hollywood
Beverly Hills
Santa Monica
San Francisco
Downtown
Mission District
Castro
New York
New York City
Manhattan
Brooklyn
Queens
Albany
Downtown Albany
Pine Hills
Center Square
Canada
Ontario
Toronto
Downtown Toronto
Scarborough
North York
Ottawa
ByWard Market
Glebe
Westboro
British Columbia
VanCouver
Downtown Vancouver
Kitsilano
Gastown
Victoria
Inner Harbour
James Bay
Fairfield
United Kingdom
England
London
Westminster
Camden
Kensington
Manchester
City Centre
Northern Quarter
Deansgate
Scotland
Edinburgh
Old Town
New Town
Leith
Galsgow
City Centre
West End
Merchant City
India
Karnataka
Banglore
Koramangala
Indiranagar
Whitefield
Mysore
City Centre
Gokulam
Hebbal
Maharashtra
Mumbai
Bandra
Andheri
Colaba
Pune
Koregaon Park
Baner
Kothrud
<nile-dropdown stay-open-on-select>
<nile-button name="user" slot="trigger">Select Country</nile-button>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">United States <nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">California<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Los Angeles <nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Hollywood</nile-menu-item>
<nile-menu-item>Beverly Hills</nile-menu-item>
<nile-menu-item>Santa Monica</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">San Francisco<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Downtown</nile-menu-item>
<nile-menu-item>Mission District</nile-menu-item>
<nile-menu-item>Castro</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">New York<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">New York City<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Manhattan</nile-menu-item>
<nile-menu-item>Brooklyn</nile-menu-item>
<nile-menu-item>Queens</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Albany<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Downtown Albany</nile-menu-item>
<nile-menu-item>Pine Hills</nile-menu-item>
<nile-menu-item>Center Square</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Canada<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Ontario<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Toronto<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Downtown Toronto</nile-menu-item>
<nile-menu-item>Scarborough</nile-menu-item>
<nile-menu-item>North York</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Ottawa<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>ByWard Market</nile-menu-item>
<nile-menu-item>Glebe</nile-menu-item>
<nile-menu-item>Westboro</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">British Columbia<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">VanCouver<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Downtown Vancouver</nile-menu-item>
<nile-menu-item>Kitsilano</nile-menu-item>
<nile-menu-item>Gastown</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Victoria<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Inner Harbour</nile-menu-item>
<nile-menu-item>James Bay</nile-menu-item>
<nile-menu-item>Fairfield</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">United Kingdom<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">England<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">London<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Westminster</nile-menu-item>
<nile-menu-item>Camden</nile-menu-item>
<nile-menu-item>Kensington</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Manchester<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>City Centre</nile-menu-item>
<nile-menu-item>Northern Quarter</nile-menu-item>
<nile-menu-item>Deansgate</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Scotland<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Edinburgh<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Old Town</nile-menu-item>
<nile-menu-item>New Town</nile-menu-item>
<nile-menu-item>Leith</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Galsgow<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>City Centre</nile-menu-item>
<nile-menu-item>West End</nile-menu-item>
<nile-menu-item>Merchant City</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">India<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Karnataka<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Banglore<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Koramangala</nile-menu-item>
<nile-menu-item>Indiranagar</nile-menu-item>
<nile-menu-item>Whitefield</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Mysore<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>City Centre</nile-menu-item>
<nile-menu-item>Gokulam</nile-menu-item>
<nile-menu-item>Hebbal</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Maharashtra<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Mumbai<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Bandra</nile-menu-item>
<nile-menu-item>Andheri</nile-menu-item>
<nile-menu-item>Colaba</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
<nile-menu-item>
<nile-dropdown hoist placement="right-start" stay-open-on-select>
<span slot="trigger">Pune<nile-icon name="arrowright"></nile-icon></span>
<nile-menu>
<nile-menu-item>Koregaon Park</nile-menu-item>
<nile-menu-item>Baner</nile-menu-item>
<nile-menu-item>Kothrud</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</nile-menu>
</nile-dropdown>
</nile-menu-item>
</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