Dropdown

Ask a question

Summary

Dropdown2 creates a dropdown menu, with optional sections, headings, icons, checkbox items, radio group items and disabled items. Submenus are supported but should be avoided where possible for usability reasons.

Status

API status:	experimental
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-dropdown2`
AMD Module key:	N/A
Experimental since:	5.9

Examples

<button aria-controls="example-dropdown" class="aui-button aui-style-default aui-dropdown2-trigger" aria-haspopup="true">
    Open dropdown
</button>

<aui-dropdown-menu id="example-dropdown">
    <aui-section label="Links">
        <aui-item-link href="http://atlassian.com">Atlassian</aui-item-link>
        <aui-item-link href="http://news.ycombinator.com">Hacker news</aui-item-link>
        <aui-item-link disabled href="http://github.com">Github</aui-item-link>
    </aui-section>
    <aui-section label="Browsers">
        <aui-item-radio checked interactive>Chrome</aui-item-radio>
        <aui-item-radio interactive>Firefox</aui-item-radio>
        <aui-item-radio disabled interactive>Spartan</aui-item-radio>
    </aui-section>
    <aui-section label="Languages">
        <aui-item-checkbox checked interactive>Javascript</aui-item-checkbox>
        <aui-item-checkbox interactive>Fortran</aui-item-checkbox>
        <aui-item-checkbox interactive>Rust</aui-item-checkbox>
    </aui-section>
</aui-dropdown-menu>

Attributes

Components	Attribute	Description
`<aui-dropdown-menu>`	`src`	A URL the component will fetch JSON from in order to template the dropdown's contents.
`<aui-section>`	`label`	The text that will appear in the heading of a dropdown section.
`<aui-item-link>`, `<aui-item-checkbox>`, `<aui-item-radio>`	`interactive`	If set, the dropdown item will not close when clicked.
`<aui-item-link>`, `<aui-item-checkbox>`, `<aui-item-radio>`	`disabled`	If set, the dropdown item will not be selectable by the user.
`<aui-item-checkbox>`, `<aui-item-radio>`	`checked`	If set, the dropdown item will be selected.
`<aui-item-link>`	`for`	The `id` of another dropdown that this link will open as a submenu.

Remote dropdown

A dropdown's contents can be fetched from a URL providing JSON that matches the following specification.

<button aria-controls="example-dropdown" class="aui-button aui-style-default aui-dropdown2-trigger" aria-haspopup="true">
    Open dropdown
</button>

<aui-dropdown-menu id="example-dropdown" src="/async-dropdown">
</aui-dropdown-menu>

[
    { type: "section", label: "Projects", items: [
        { type: "link", href: "#", content: "AUI" },
        { type: "link", href: "#", content: "Design Platform" },
        { type: "link", href: "#", content: "Children" }
    ]},
    { type: "section", label: "Issues", items: [
        { type: "link", href: "#", content: "AUI-111" },
        { type: "link", href: "#", disabled: true, content: "AUI-222" },
        { type: "link", href: "#", hidden: true, content: "AUI-333" }
    ]},
    { type: "section", label: "Checkboxes", items: [
        { type: "checkbox", href: "#", interactive: true, content: "checkbox" },
        { type: "checkbox", href: "#", interactive: true, checked: true, content: "checkbox checked" }
    ]},
    { type: "section", label: "Radio", items: [
        { type: "radio", href: "#", interactive: true, content: "radio" },
        { type: "radio", href: "#", interactive: true, checked: true, content: "radio checked" }
    ]}
]

The core structure of this JSON is a list of sections, each section containing an optional label property and a mandatory items property.

The items array closely reflects the markup pattern – the type property corresponds to a tagname, and the attributes are listed as properties of the same name, as listed in the attributes table. Boolean attributes must take a value of true or false, otherwise the value of each property will be inserted into the corresponding attribute directly.