# Menubar Item

The **`Menubar Item`** element is used to represent a menu entry within a [Menubar](/app-editor/page-editor/built-in-elements/menubar.md) component. 

Typically, it includes the editable [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link.md) element, but you have the flexibility to add various other elements to it. For example, you can include elements such as [Input](/app-editor/page-editor/built-in-elements/input.md), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown.md), [Button](/app-editor/page-editor/built-in-elements/button.md), or [Image](/app-editor/page-editor/built-in-elements/image.md) within the Menubar Item element. This allows you to customize the content of each menu item according to your specific needs.

It's important to note that the **`Menubar Item`** element cannot be directly accessed in the [Page Element Library](/app-editor/page-editor/page-editor-tour.md#page-element-library) for drag-and-drop functionality. Instead, you can utilize the following pre-built elements:

* [Menu Item](/app-editor/page-editor/built-in-elements/menu-item.md): This has a [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link.md) element, which can be edited and configured.
* [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu.md): This adds a sub-menu to the menubar which can be customized.
* [Menubar Login Info](/app-editor/page-editor/built-in-elements/menubar-popup-menu.md): This adds a widget that shows information about the current logged-in user to your app.

{% hint style="info" %}
To add a **`Menubar Item`** element containing custom content, you can utilize the [Menu Item](/app-editor/page-editor/built-in-elements/menu-item.md) element by removing the default [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link.md) and replacing it with other desired elements. This allows you to incorporate custom content within the Menubar Item according to your specific requirements.
{% endhint %}

***

## Options

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

### `Activated Look`

This setting works in conjunction with the [Background Style](/app-editor/page-editor/built-in-elements/menubar-holder.md#background-style) setting of the [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder.md) element:

* Default: This setting will have no effect.
* Light: Renders the element in a more distinctly dark text color.
* Dark: Renders the element in a more distinctly light text color.

### `Contains Popup Menu`

This setting is used to indicate that the element contains a popup menu or a sub-menu. This setting is automatically turned ON for the [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu.md) element.

### `Popup Menu Direction`

Control the direction in which the popup-menu or sub-menu will open when the element is clicked. This setting is only used if the element contains a popup-menu or a sub-menu and has the [Contains Popup Menu](#contains-popup-menu) option turned on.


---

# 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/menubar-item.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.