ComboStrap UI - Menu bar


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

Inside a menu component, you can add:


<menubar breakpoint="lg" position="normal" align="left" theme="light">


  • breakpoint is one of the breakpoint code (xs,'sm, md, lg (Default), xl) when the menu bar will collapse.
  • position is one of normal (default), top (bottom is not yet supported)
  • align defines the horizontal placement. Possible values: left(Default) or center
  • theme defines the luminance of the text. You can specify light (default) or dark

The default background-color is a light background.


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

  • The start of the menubar.
<menubar breakpoint="sm">
<brand class="pt-0" title="Brand">
<icon name="desktop-mac-dashboard" /> Brandly
  • Collapse to indicate all elements that will collapse when the size of the screen is lower than the menubar breakpoint
  • 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" >
<dropdown name="UI Box">
  • Output

A dark menubar

<menubar theme="dark" background-color="dark" breakpoint="xs">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
Menubar text with an inline element
Powered by ComboStrap