---json
{
    "canonical": ":top_menubar",
    "description": "A top menubar is just two steps",
    "page_id": "z69x3fbp11kk2vkzitzig",
    "title": "Top navigation bar made simple"
}
---

====== ComboStrap - Fixed top Menu ======



===== About =====
A ''fixed-top menu'' or ''fixed-top header'' is a UI region that stays located at the top of your page even when you scroll the content down. ComboStrap implements it via the [[docs:menubar:menubar|menu bar]].






===== How to configure a fixed-top menu ? =====



Create a [[docs:menubar:menubar|menu bar]] with the option ''position="top"''

Minimal Example:
<code dw>
<menubar position="top">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
ComboStrap (Beta)
</brand>
</menubar>
</code>

For a complete and detailed instruction, see [[howto:getting_started:7_menu]]


===== Features =====

A ''fixed-top'' [[docs:menubar:menubar|menu bar]] gives a great experience but is difficult to implement because they needs some extra styling in order to relocate:
  * the top location of the page
  * the location of the [[docs:navigation:outline|outline headings]].
Without this changements, a navigation via a link to an [[docs:content:heading|heading]] would land below the fixed-top menu and will then cache the heading.

''ComboStrap'' is ''fixed-top menu'' ready, no extra steps needed.