# Menubar Item

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

Typically, it includes the editable [Menubar Item Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item-link) element, but you have the flexibility to add various other elements to it. For example, you can include elements such as [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input), [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown), [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button), or [Image](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/image) 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](https://docs.zingy.ai/app-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the following pre-built elements:

* [Menu Item](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menu-item): This has a [Menubar Item Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item-link) element, which can be edited and configured.
* [Menubar Popup Menu](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-popup-menu): This adds a sub-menu to the menubar which can be customized.
* [Menubar Login Info](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-popup-menu): 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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menu-item) element by removing the default [Menubar Item Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item-link) 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](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Activated Look`

This setting works in conjunction with the [Background Style](https://docs.zingy.ai/app-editor/page-editor/menubar-holder#background-style) setting of the [Menubar Holder](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-holder) 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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-popup-menu) 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.