After reading this article, you’ll know:

The menu bar at the top of your application is often seen as one of the first eye-catchers users look at when entering your application. Therefore it is seen as one of the most important features to properly showcase in your application. Within Betty Blocks we have a component that includes this entire top menu for you - the Navigation bar.

The Navigation bar contains a place for a logo/page name and some menu items. This is often used to navigate between the top-level layer of the application. It is the only component that can be dragged onto your page without first having to place layout components onto your canvas.

The Navigation bar has a few standard options, you are able to change the text on the left-hand side in the title option. Instead of a title (or both), you can also set a logo by changing the settings in the logo option segment.

With the media type, you can select an image directly from your application or a URL to load the logo. Change the sizing using the logo width option.

You can also add an on-click option that allows users to navigate to another page, a best practice is to set this to the home page of your application.

The styling options allow you to set the size, coloring, and alignment. An option that is specific to the Box and Navigation bar components is the position option, this allows you to define where on your page you want your component to be placed. Would you like your menu to float on the top of your view while you scroll through your page? select the fixed or sticky position to keep the component stuck to the top of your page.

More about aligning, positioning and spacing can be found here.

Drag the Navigation bar onto your empty canvas, or above the components you have already put onto your canvas. (You can also drag the canvas to the top of the page using the page tree)

When the canvas is on your page you can customize it the way you prefer. Change the title, or add the logo of your brand.

You can use the right-hand side of the menu (unless you have changed the alignment) to customize content within your menu bar. By default, two menu buttons are added that allow you to set navigation to other pages, and configure them so that users can quickly navigate to your other main pages.

For a step-by-step guide on using the Navigation bar, have a look at this article.

The Navigation bar is an important tool for many applications, having a menu at the top of your view is almost always a best practice for which we would advise using the Navigation bar.

For side menu, the Drawer component would be a better option, and in cases where custom styling is needed, a custom navigation bar can also be created using layout and content components.

Navigation is incredibly important on your pages, and a menu that works smoothly and looks nice is a game changer for your application. The Navigation bar is a wonderful component that often starts the foundation of your pages.