Table of Contents

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

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

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

</group>

<search/>

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

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

Inside a menu component, you can add: