# AUI Dropdown Menu

## Introduction

The AUI Dropdown Menu can be a nice way to present links to other sites on your page.

## The AUI Dropdown Menu <a href="#the-aui-dropdown-menu" id="the-aui-dropdown-menu"></a>

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FXGDSmDDysterte9t5B7b%2Fimage2017-11-8_19-16-24.png?alt=media&#x26;token=abe31770-1737-462c-ac30-1ed50188bdd4" alt=""><figcaption></figcaption></figure>

The plguin breaks down the above menu in three elements (macros):

| Element          | Description                                                                                                 | Macro Name                |
| ---------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------- |
| **Button**       | The dropdown button. It has a title and clicking on it opens a menu.                                        | AUI Dropdown Button       |
| **Menu Section** | Sections in the menu. Each section has a title (gray capitals) and a horizontal line divider at the bottom. | AUI Dropdown Menu Section |
| **Menu Link**    | An entry in a section that links to another site.                                                           | AUI Dropdown Menu Link    |

There is a clear hierarchy to these elements/macros and that reflects in the way you nest these macros on your page.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FRGz6zVGiTGBqzc1w7aCb%2Fimage2017-11-8_19-24-48-768x294.png?alt=media&#x26;token=b0c6fc31-5250-40dc-bd45-1bbba651376c" alt=""><figcaption></figcaption></figure>

## AUI Dropdown Button

Start with the HTML Dropdown Button macro.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FwuUJSUmGT67JC5KbKKsT%2Fimage2017-11-8_19-26-53-768x470.png?alt=media&#x26;token=a9c851e5-8c1d-4917-b1a1-8b25c09821a8" alt=""><figcaption></figcaption></figure>

### **Title**

Enter the title of the button.

### **Dropdown Menu ID**

Give your menu an ID. It must be unique on your page.

### **Button Primary**

With this option enabled, the button will be displayed in the primary color (usually blue).

## AUI Dropdown Menu Section

Add as many sections as you like inside the body of the HTML Dropdown Button macro’s body.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FkoClUpJCKq5olh2pyEbG%2Fimage2017-11-8_19-29-58-768x470.png?alt=media&#x26;token=089fdabb-6dbe-4c0d-b3c0-a1c99586335a" alt=""><figcaption></figcaption></figure>

### **Section Label**

Enter the section label for this section.

## AUI Dropdown Menu Link

Add as many links as you like inside the body of each HTML Dropdown Section macro’s body.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FussD1AE3QHn9o1iOb9uv%2Fimage2017-11-8_19-33-49-768x472.png?alt=media&#x26;token=4fee915c-94d5-4c77-9f4a-b695c858636f" alt=""><figcaption></figcaption></figure>

### **Link Title**

Enter the link title of the link.

### **Link**

Enter the URL of the link.

{% hint style="info" %}
Unfortunately, the AUI link item does not support the \<rel> or \<target> attribute for links. All links will be opened in the same window, unless you Ctrl + Click the link.
{% endhint %}