---json
{
    "aliases": [
        { "path": ":docs:getting_started:6_menu" }
    ],
    "canonical": ":6_menu",
    "description": "The theme system supports the creation of a slot page called header slot in order to create a menu bar at the top location of the page.\n\n\n\n\n\n\t*  Create a page called :slot_header (at the root directory of your pages)\n\t*  Enter the below menu bar example\n\nIf you have uploaded a icon in the Favicon step, a minimal header slomenu bamenu bar pagfooter sloUI ComponentRouting and redirectionSEO pagesubscribe",
    "name": "Top menubar",
    "page_id": "rtc8cfn4cafxhrojpog8m",
    "template": "holy"
}
---


===== About =====
The [[:docs:theme:template:template|templates]] support the creation of a [[:docs:theme:slot:slot|slot page]] in order to modify a page layout.

For instance, most of them support a [[docs:theme:slot:header_slot|page header slot]] in order to modify the [[:docs:theme:element:page-header|page header]] (the top location of your pages)

This is where we will create a [[docs:menubar:menubar|menu bar]].


===== Steps=====

  * Create a page called '':slot_header'' (at the root directory of your pages)
  * Enter the below [[docs:menubar:menubar|menu bar]] example



If you have uploaded a icon in the [[6_favicon|Favicon step]], a minimal ''header slot'' with a [[docs:menubar:menubar|menu bar]] would look like:

<webcode name="Default" iframe>
<code dw>
<menubar breakpoint="lg">
<brand title="My Brand">
<icon name="logo.svg" />
My Brand name
</brand>
<collapse>
<group expand="true">
<dropdown name="Menu">
[[#|item]]
[[#|item]]
</dropdown>
</group>

<btn shadow="true" color="white">[[getting_started:getting_started|Get Started]]</btn>
<search/>
</collapse>
</menubar>
</code>
</webcode>

More ... see the [[docs:menubar:menubar|menu bar page]]

===== Next Steps =====
In the same way, you can also modify the [[docs:theme:element:page-footer|page footer]].

Then you can:
  * Check the [[docs:component|UI Components]]
  * Learn about [[docs:router:router|Routing and redirections]]
  * Have a look at the [[docs:seo:seo|SEO page]]

For more tips and tops, you can also [[:newsletter|subscribe to the newsletter]].