ComboStrap UI - Menu bar

About

A menubar is an horizontal navigational bar with links and dropdown menu that should be used in the page header.

Example

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

• The start of the menubar.

<menubar breakpoint="sm">

• The brand. You can also put your logo icon

<brand title="Brand">
<icon name="desktop-mac-dashboard" /> Brandly
</brand>

• Collapse to indicate all elements that will collapse when the size of the screen is lower than the menubar breakpoint

<collapse>

• A group with expand=“true” to push the element that are not in the group at the right side of the page

<group expand="true">

• Two dropdown menu

<dropdown name="Call to Action" >
[[card|Card]]
[[button|Button]]
</dropdown>
<dropdown name="UI Box">
[[note|Note]]
[[card|Card]]
[[blockquote|Blockquote]]
</dropdown>

• The end of the group

</group>

• The search bar

<search/>

• The end of the element to collapse (ie we collapse all drop down and the search bar

</collapse>
</menubar>

• Output

A dark menubar

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

Syntax

<menubar breakpoint="lg" position="normal" container="sm" theme="light">

where:

Inside a menu component, you can add:

• a brand with an optional icon
• a group to group navigational element such as a dropdown menu
• a collapse container to group the element that will collapse
• a search form
• a button