Menu List

Design Code

Example 1

Activity Log Privacy Settings Help Center Sign Out 
<nile-menu >
    <nile-menu-item>Activity Log</nile-menu-item>
    <nile-menu-item>Privacy Settings</nile-menu-item>
    <nile-menu-item>Help Center</nile-menu-item>
    <nile-menu-item>Sign Out</nile-menu-item>
</nile-menu>

Default Search Example

View Profile Edit Settings Notifications Messages Activity Log Privacy Settings Help Center Sign Out 
<nile-menu searchEnabled="true">
    <nile-menu-item>View Profile</nile-menu-item>
    <nile-menu-item>Edit Settings</nile-menu-item>
    <nile-menu-item>Notifications</nile-menu-item>
    <nile-menu-item>Messages</nile-menu-item>
    <nile-menu-item>Activity Log</nile-menu-item>
    <nile-menu-item>Privacy Settings</nile-menu-item>
    <nile-menu-item>Help Center</nile-menu-item>
    <nile-menu-item>Sign Out</nile-menu-item>
</nile-menu>

CustomSearch Example

View Profile Edit Settings Notifications Messages Activity Log Privacy Settings Help Center Sign Out 
<nile-menu searchEnabled="true" customSearch="true">
    <nile-menu-item>View Profile</nile-menu-item>
    <nile-menu-item>Edit Settings</nile-menu-item>
    <nile-menu-item>Notifications</nile-menu-item>
    <nile-menu-item>Messages</nile-menu-item>
    <nile-menu-item>Activity Log</nile-menu-item>
    <nile-menu-item>Privacy Settings</nile-menu-item>
    <nile-menu-item>Help Center</nile-menu-item>
    <nile-menu-item>Sign Out</nile-menu-item>
</nile-menu>

Footer Slot

Activity Log Privacy Settings Help Center Sign Out + Add More Options 
  <nile-menu >
    <nile-menu-item>Activity Log</nile-menu-item>
    <nile-menu-item>Privacy Settings</nile-menu-item>
    <nile-menu-item>Help Center</nile-menu-item>
    <nile-menu-item>Sign Out</nile-menu-item>
    <span slot="menu__footer" style="margin: auto 0;"> + Add More Options</span>
  </nile-menu>

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 slot for the menu list content
menu__header slot for the menu list header
menu__footer slot for the footer of the list

Properties

Name Description Type Default Value
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
allowSpaceKey Enables the space key press in menu selection Boolean False

dependencies

This component automatically imports the following dependencies.

nile-menu-item

To be Added Later