# Menubar Style2

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F3R33i7BE34orJ0qOV6F1%2Fimage.png?alt=media&#x26;token=5406b804-bafa-41c1-a95c-66359b5d1542" alt="" width="69"><figcaption><p>Menubar Style2</p></figcaption></figure></div>

The **`Menubar Style2`** is a pre-designed element that offers a complete and customizable top-level menu structure for your application.&#x20;

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FuI261SFzOJiFC8xOmFuM%2Fimage.png?alt=media&#x26;token=73b254ac-057e-49a6-b96e-8717ab6d731e" alt=""><figcaption><p>Menubar Style2</p></figcaption></figure>

This composite element is composed of the following elements arranged in two rows:

* The first row with a center-aligned placeholder text that can be replaced with logo [Image](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/image) element or anything else depending on your needs.
* A second row with a responsive menu consisting of:
  * [Menubar Holder](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-holder)
  * [Menubar Collapsible](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-collapsible)
  * [Menubar](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar) with two example [Menubar Item](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item) elements consisting of [Menubar Item Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item-link) elements.
  * A [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) . This button is responsible for controlling the  Menubar Collapsible element and displaying the Menubar. It automatically appears on smaller screen sizes.

{% hint style="success" %}
Note: The [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) becomes visible in the [Page Content Area](https://docs.zingy.ai/app-editor/page-editor-tour#page-content-area) when you switch to Tablet or Mobile view using the buttons in the [Page Content Toolbar](https://docs.zingy.ai/app-editor/page-editor-tour#page-content-toolbar).&#x20;
{% endhint %}

Using the Menubar Style2 element, you can easily implement a fully functional and adaptable top-level menu for your app, and it can be further customized to suit your specific requirements.

{% hint style="info" %}
You can add more entries to the [Menubar](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar) by:

* Dropping [Menu Item](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menu-item) elements&#x20;
* [Cloning](https://docs.zingy.ai/app-editor/working-with-page-elements#clone-the-selected-element) the existing [Menubar Item](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-item) elements.
  {% endhint %}