---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=====

  * Go to this URL http://localhost:8080/doku.php?id=slot_header to create a page called '':slot_header'' at the [[:docs:page:system:home|home level]] 
  * You will see the [[docs:menubar:menubar|menu bar]] of the starter site.

You can:
  * modify it
  * or enter a more complicated 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 Step =====

In the same way, you can also modify the [[docs:theme:element:page-footer|page footer]] with the following link: http://localhost:8080/doku.php?id=slot_footer

In the next step, we will store your site as combo site in Git.

<button color='white'>
[[8_git|Store my WebSite in Git]]
</button>