# Menu Element

Menus are objects that can be used in different contexts. The menu creation process is standardized. <br>

The four different ways you can use menus are: <br>

### Menubar / Titlebar

{% columns %}
{% column width="50%" valign="middle" %}
Menubars (Windows & Linux) attach to the top of windows. This means each individual window can have it's own menubar.

{% hint style="info" %}
Menubars only work on windows with window frames.
{% endhint %}
{% endcolumn %}

{% column width="50%" valign="middle" %}

<div align="left" data-with-frame="true"><figure><img src="/files/rJKQutENcduonLHe14sO" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="58.333333333333336%" valign="middle" %}
Titlebars (macOS) attach to the top of the screen, and is the same menu for each window.

{% hint style="warning" %}
It's recommended to always have a titlebar on macOS with basic functionality enabled like copy & paste. Otherwise, hotkeys such as Cmd + C won't work in your app.
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" valign="middle" %}

<div align="left" data-with-frame="true"><figure><img src="/files/CgDIJOgg9GpUGF6T8eh8" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

### Context Menu

{% columns %}
{% column width="66.66666666666667%" valign="middle" %}
Context menus appear when the user right clicks in your app. The context menu can be set to change depending on what kind of element the user clicks on.
{% endcolumn %}

{% column width="33.33333333333333%" valign="middle" %}

<div align="left" data-with-frame="true"><figure><img src="/files/ejWMCWLdT5TV1OIaFErO" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

### Tray menu<br>

{% columns %}
{% column width="58.333333333333336%" valign="middle" %}
If you add a tray widget, you can add a menu that shows up when the user right clicks it.
{% endcolumn %}

{% column width="41.666666666666664%" valign="middle" %}

<div align="left" data-with-frame="true"><figure><img src="/files/cEJsrSabOAtWAKWHngR7" alt=""><figcaption></figcaption></figure></div>

<div align="left" data-with-frame="true"><figure><img src="/files/wzMQMnCcEypW6BEq4oD1" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

### Dock menu (macOS only)<br>

{% columns %}
{% column width="58.333333333333336%" valign="middle" %}
Customize which options show up when the user right clicks your dock menu.
{% endcolumn %}

{% column width="41.666666666666664%" valign="middle" %}

<div align="left" data-with-frame="true"><figure><img src="/files/18zzPBU65OP3sIG6pW0S" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

## Menu Element Actions

{% content-ref url="/pages/bqBvBIMGyFwiJuJwyc8G" %}
[Actions](/deskifier/deskifier-bubble.io-docs/menu-element/actions.md)
{% endcontent-ref %}

## Menu Element Events

{% content-ref url="/pages/02pC11TBZEfgHIo8dHlb" %}
[Events](/deskifier/deskifier-bubble.io-docs/menu-element/events.md)
{% endcontent-ref %}

## Menu Element States

{% content-ref url="/pages/SPY3NVdaqFJciK6pznpN" %}
[States](/deskifier/deskifier-bubble.io-docs/menu-element/states.md)
{% endcontent-ref %}


---

# 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://deskifier.gitbook.io/deskifier/deskifier-bubble.io-docs/menu-element.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.