# Link

<div align="left"><figure><img src="/files/yC9hW5GQEbj1xXz3p0F4" alt="" width="63"><figcaption><p>Link element</p></figcaption></figure></div>

Available under the 'Basic' category, the **`Link`** element is [text editable](/app-editor/page-editor/editing-text.md) and creates a clickable hyperlink.&#x20;

***

## Options

The [Options tab](/app-editor/page-editor/page-element-settings.md#options-tab) settings for this element are described below:

### `HRef`

Sets the destination URL for the hyperlink. The URL can be external to other websites or internal to other pages of your app.&#x20;

{% hint style="info" %}
Using [Page Flow](/app-editor/page-flow.md), you can define custom actions instead of just navigating to the URL.
{% endhint %}

### `Target`

Choose whether you want to open the URL in a new tab/page or in the same page.

### `Link Action`

This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-toggle`** attribute. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1.md), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2.md)  and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu.md) elements use this by setting the value to ***`dropdown`***. You can also use this to control a [Collapsible Area](/app-editor/page-editor/built-in-elements/collapsible-area.md) element by setting the value to ***`collapse`***.

### `Action Target`

This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-target`** attribute. The value is set to the Element ID of the element to be controlled. To find the Element ID see [here](/app-editor/page-editor/page-element-settings.md#advanced-tab).

{% hint style="info" %}
The Element ID needs to be prefixed with a # character. This is also known as ID selector syntax. For more information click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors).
{% endhint %}

### `Popup Menu Icon`

Enable this if you want a :arrow\_down\_small:arrow to appear next to the link to indicate that it will invoke a popup menu. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1.md), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2.md)  and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu.md) elements turn this setting on.

### `Type`

Select *Button* to turn this link into a button.

### `Button Look`

Only applies if the **`Type`** is set to *Button*. Select from a pre-defined list of background and text colors for the button look. For any other customizations see [here](/app-editor/page-editor/page-element-settings.md).

### `Button Size`

Only applies if the **`Type`** is set to *Button*. Select from a pre-defined list of sizes. For any other customizations see [here](/app-editor/page-editor/page-element-settings.md).

### `Dynamic Content`

{% hint style="warning" %}
NOTE: This setting only appears for Link elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design.md) element.&#x20;
{% endhint %}

When this setting is ON, it enables you to set the name of the placeholder field (see **`Field Name`** setting below) with which the value of the [**`HRef`**](#href) setting will be dynamically provided using [Page Flow](/app-editor/page-flow.md).

### `Field Name`

{% hint style="warning" %}
NOTE: This setting only appears for Link elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design.md) element.&#x20;
{% endhint %}

When the Dynamic Content setting is ON, this setting contains the name of the placeholder field with which the value of the [**`HRef`**](#href) setting will be dynamically provided using [Page Flow](/app-editor/page-flow.md).

{% hint style="info" %}
For a general information about hyperlinks see:&#x20;

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
