ComboStrap UI - Menu bar

Undraw My Documents


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


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


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


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:

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Related HowTo's
Undraw Stepping Up
How to create a top menu bar?

The theme system supports the creation of a slot page called header slot in order to create a menu bar at the top location of the page. * Create a page called :slot_header (at the root directory...

Recommended Pages
Layout Element
ComboStrap - Page Header Slot

The page header slot is a slot that replaces the page header. The how-to getting started guide explains how to create a header navigational bar: . You can configure the name of the header slot...
Favicon Verification
ComboStrap Site Metadata - Logo

A logo is an icon that illustrates your website and is part of what's called branding Your logo is used as default page image illustration: for social card such as facebook and twitter for search...
Undraw My Documents
ComboStrap UI - Brand

brand is a component that creates a company / brand button or link with the corresponding: logo icon and colors By default, the brand component will show your brand. Ie a button with: your...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw My Documents
ComboStrap UI - Collapse

collapse is a menubar component that will collapse its children on a smaller screen making them only visible by clicking on the sandwich icon. the toggle the accordion All the element that are...
Undraw My Documents
ComboStrap UI - Dropdown

dropdown is a component that shows a dropdown menu. It must be placed inside a group element of the menubar that you will find at the top of your page in a header slot This component accepts as entry...
Undraw My Documents
ComboStrap UI - Menu bar

A menubar is an horizontal navigational bar with links and dropdown menu that should be used in the page header. The start of the menubar. The brand. You can also put your logo icon Collapse...
Undraw My Documents
ComboStrap UI - Nav Group

group permit to groups navigation elements to the left or right side of a menubar. where: expand=true will push the elements outside the group to the right. The first group will be at the left...
Pagelist Search Box Combostrap
ComboStrap UI - Search

search is a markup component that will output the search box of the internal search engine It can be placed in a menubar component. The search component has: the f accesskey. In chrome, Alt+shift+f...
Internal Search Engine Browser
Internal Search Engine

The internal search engine permits to search a page via search terms. ComboStrap supports the following search engine features. You can add a search box (generally in the menubar). Internally,...

Task Runner