Want to add or edit your website's navigation bar? You've come to the right place 👌

ℹī¸ For this specific use-case, we strongly recommend you to begin with the navigation available on our templates or in the toolkit. Creating a navigation from scratch is no easy task, and we're still working on the UX on that matter. If you still want to create a navigation from scratch, please contact us (or do it at your own peril 😉).

In this article, we'll take this navigation bar as an example:

It's made of:

A logo (in red)

A navigation menu (in green)

A button (in purple)

Basically, a navigation bar is like any other section: it's a container which contains other containers and elements.

You can see its structure in the Navigator:

Editing it is pretty simple, simply drag and drop elements from the Toolkit or your website's Design Library to the navigation bar's container.

The only difference is the presence of a specific container, known as the Navigation Menu.

You can recognize it by its green hamburger icon:

What's so special about this container?

Everything enclosed in it will be hidden on mobile and/or tablet breakpoints, under a hamburger menu.

You can edit its properties in the sidebar, under settings > configuration:

You can edit two things:

at which breakpoint the menu displays as a hamburger icon (desktop/tablet/mobile)

the menu type (dropdown/sliding from right or left)
Was this article helpful?
Thank you!