Dropdown upgrade guide

This page is a guide to upgrading from the Dropdown 1 API to the new web component API.

Inline Dialog

Initialisation

Old API New API
Demo code
AخA
 
<ul id="dropDown-standard" class="styled-parent">
    <li class="aui-dd-parent">
        <a href="#" class="aui-dd-trigger">An old Dropdown</a>
        <ul class="aui-dropdown">
            <li class="dropdown-item"><a href="#" class="item-link">First</a></li>
            <li class="dropdown-item"><a href="#" class="item-link">Second</a></li>
            <li class="dropdown-item"><a href="#" class="item-link">Third</a></li>
        </ul>
    </li>
</ul>
 
AJS.$("#dropDown-standard").dropDown("Standard");
Demo code
Result
First Second Third
x
 
<button class="aui-button aui-dropdown2-trigger" aria-controls="new-dropdown">
    Dropdown menu
</button>
<aui-dropdown-menu id="new-dropdown">
    <aui-item-link href="#">First</aui-item-link>
    <aui-item-link href="#">Second</aui-item-link>
    <aui-item-link href="#">Third</aui-item-link>
</aui-dropdown-menu>

Conversion Guide

More examples coming soon.