Dropdown

• Introduction
• Basic Example
• Real World Example

Enables the creation of dropdown menus.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Dropdown module.

YUI().use(
  'aui-dropdown',
  function(Y) {
    // code goes here
  }
);

---

Using Dropdown

Create an HTML element to hold the Dropdown module. The outer ul element represents the entire navigation bar and the #myDropdown item is where our submenu will be created.

<ul>
  <li id="myDropdown">
    <a id="myTrigger" href="#">Dropdown</a>
  </li>
</ul>

Now create a new instance of Dropdown component by setting the boundingBox to the li element we just created. Also, we should set trigger to the link inside the li element so that the menu will expand when a user clicks on the link. Then, let's render it!

YUI().use(
  'aui-dropdown',
  function(Y) {
    new Y.Dropdown(
      {
        boundingBox: '#myDropdown',
        trigger: '#myTrigger'
      }
    ).render();
  }
);

---

Configuring Dropdown

There are some other options that you can pass to your Dropdown instance: hideOnEsc and hideOnClickOutSide. Both of these attributes control how the Dropdown items are hidden. By default, the items are hidden if the user clicks outside of the Dropdown menu or presses the esc key. These functions can be disabled by setting the appropriate attribute to false.

YUI().use(
  'aui-dropdown',
  function(Y) {
    new Y.Dropdown(
      {
        boundingBox: '#myDropdown',
        trigger: '#myTrigger',
        hideOnClickOutSide: false,
        hideOnEsc: false
      }
    ).render();
  }
);