> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/aui-macros/aui-dropdown-menu.md).

# 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="/files/u2WITOsnNfMRqjrTWwMV" 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="/files/ieqxGao00sqkFSgmPvEn" alt=""><figcaption></figcaption></figure>

## AUI Dropdown Button

Start with the HTML Dropdown Button macro.

<figure><img src="/files/gWS4h0cIxWxyqx7QA8Ag" 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="/files/9CscH0tGSfAQbqSpjO30" 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="/files/M681crZQXNlVCHKj3wus" 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 %}