How to create a top menu bar?

Undraw Stepping Up


The templates support the creation of a slot page in order to modify a page layout.

For instance, most of them support a page header slot in order to modify the page header (the top location of your pages)

This is where we will create a menu bar.


  • Create a page called :slot_header (at the root directory of your pages)
  • Enter the below menu bar example

If you have uploaded a icon in the Favicon step, a minimal header slot with a menu bar would look like:

<menubar breakpoint="lg">
<brand title="My Brand">
<icon name="logo.svg" />
My Brand name
<group expand="true">
<dropdown name="Menu">

<btn shadow="true" color="white">[[getting_started:getting_started|Get Started]]</btn>

More … see the menu bar page

Next Steps

In the same way, you can also modify the page footer.

Then you can:

For more tips and tops, you can also subscribe to the newsletter.

Showcase yourself and your brand

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

Related HowTo's
Material Design Choose Icon
How to configure the Favicons

This page is an HowTo that shows you how to choose and install a favicon and your logo image with ComboStrap. You can design your own logo but you can also be inspired by collection of logo In...
Undraw Stepping Up
How to get started with ComboStrap ?

This page helps you to get started with ComboStrap

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...
Undraw My Documents
Top navigation bar made simple

A top menubar is just two steps

Task Runner