---json
{
    "canonical": ":menubar",
    "page_id": "yvrmmu2djwquczyqpykuo",
    "template": "holy"
}
---

====== ComboStrap UI - Menu bar ======

===== About =====
A ''menubar'' is an horizontal [[docs:navigation:navigation|navigational bar]] with links and dropdown menu that should be used in the [[docs:theme:slot:header_slot|page header]].




===== Example =====

==== A menubar with two dropdown menus and the search box at the right ====

<webcode name="MenubarDropDownSearchBox" frameborder=0>

  * The start of the menubar.
<code dw>
<menubar breakpoint="sm">
</code>
  * The [[docs:menubar:brand|brand]]. You can also put your logo [[docs:content:icon|icon]]
<code dw>
<brand title="Brand">
<icon name="desktop-mac-dashboard" /> Brandly
</brand>
</code>
  * [[docs:menubar:collapse|Collapse]] to indicate all elements that will collapse when the size of the screen is lower than the menubar breakpoint
<code dw>
<collapse>
</code>
  * A group with ''expand="true"'' to push the element that are not in the group at the right side of the page
<code dw>
<group expand="true">
</code>
  * Two [[docs:menubar:dropdown|dropdown]] menu
<code dw>
<dropdown name="Call to Action" >
[[card|Card]]
[[button|Button]]
</dropdown>
<dropdown name="UI Box">
[[note|Note]]
[[card|Card]]
[[blockquote|Blockquote]]
</dropdown>
</code>
  * The end of the [[docs:menubar:group|group]]
<code dw>
</group>
</code>
  * The [[docs:menubar:search|search bar]]
<code dw>
<search/>
</code>
  * The end of the element to collapse (ie we collapse all [[docs:menubar:dropdown|drop down]] and the [[docs:menubar:search|search bar]]
<code dw>
</collapse>
</menubar>
</code>
  * Output
</webcode>

==== A dark menubar ====

<webcode name="Default">
<code dw>
<menubar theme="dark" background-color="dark" breakpoint="xs">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
ComboStrap
</brand>
<collapse>
<group>
[[#|Home]]
[[#|Features]]
[[#|Release]]
Menubar text with an inline element
</group>
</collapse>
</menubar>
</code>
</webcode>


===== Syntax =====
<code dw>
<menubar breakpoint="lg" position="normal" container="sm" theme="light">
</code>
where:

^ Attribute ^ Default ^ Possible Values ^ Description ^
| ''breakpoint'' | ''xl'' | [[docs:styling:breakpoint|breakpoint code]] (''xs'','''sm'', ''md'', ''lg'' , ''xl'')  | Define the width of the screen when the menu bar will [[:docs:menubar:collapse|collapse]] |
| ''position'' | ''normal'' | [[docs:menubar:fixed-top|top]] | Position of the bar (''bottom'' is not yet supported) |
| ''theme'' | ''light'' | ''light'' (default) or ''dark'' | It defines the luminance of the text |
| ''container'' | [[:docs:theme:element:container|default layout container value]] | A [[:docs:theme:element:container|container type]] value | It defines the horizontal layout |
| [[docs:styling:color|background-color]] | ''light'' | any [[:docs:styling:color|color]] | The background color |

Inside a ''menu'' component, you can add:
  * a [[docs:menubar:brand|brand]] with an optional [[docs:content:icon|icon]]
  * a [[docs:menubar:group|group]] to group navigational element such as a [[docs:menubar:dropdown|dropdown menu]]
  * a [[docs:menubar:collapse|collapse container]] to group the element that will collapse
  * a [[docs:menubar:search|search form]]
  * a [[docs:content:button|button]]