What is a Navbar

As its name suggests, a Navbar, short for Navigation Bar, is an element that helps users navigate a website quickly and efficiently. It is basically a list of links and actually builds off of a standard HTML list but boasts a better look and functionality.

Navbars come in various forms. They can be implemented vertically or horizontally and they can even be fixed or dynamic. There are Navbars that include not just text but also graphics, videos, etc. Their design all depends on the needs of a website and its users.

Why Use a Navbar

A Navbar helps users find their destination easily on any website. Through links and sub-links listed on the Navbar, they can quickly visit their target page without the need to remember its URL. Of course, for a Navbar to be helpful, it needs to be well-designed. 

What Makes a Well-Designed Navbar

A user-friendly Navbar is one of the main factors that lead to a website’s success so keep that in mind when designing your own. A good Navbar combines many things like choosing the most helpful links, having simple text, keeping a consistent and noticeable style, and more. In essence, you need to think hard about what would help your users the most and design it with this in mind.

How to Add A Navbar

To add a Navbar, find the Elements tab on the topbar and go to the Components section that’s towards the bottom of the Elements Panel. Finally, drag and drop the Navbar element to your canvas.

The Navbar should already be populated with a few placeholder elements like:

• Image Whitin a Link Block: An image element to embed your website or brand’s logo and link your homepage.
• Nav Menu: A nested element that contains all Nav Links i.e. Link Blocks which contain a text element.

Navbar Menu Settings

Now it’s time to customize your Navbar to suit your needs. From the Nav Menu’s inline editor, click on the ellipsis icon to bring up the Nav Menu Settings. Here, you can add new Menu Items, reorder them, create Dropdown Menus, and more.

Nav Menu Items

Add New Menu Item: Add a new menu item from here. Click on the plus symbol to add one and a new item called Nav Menu should appear listed at the bottom. 

Reorder Menu Items: Click on the reorder icon (six-dot icon) and drag it to rearrange these menu items.

Now once your new menu item has been added, click on the ellipsis icon that’s beside each one. This will bring up the following options:

Set as Home Page: Use this option to set a menu item as Home Page i.e. the main page of a website.

Move to Dropdown: Use this option to add a menu item to another’s submenu. A submenu is basically a dropdown list that appears when you hover or click on a menu item. This feature is explained in further detail in the next section.

Rename: Select this option to Rename your item. On clicking, a pop-up window should appear where you have to simply enter a name for this item and save.

Duplicate: Select this option to duplicate this menu item.

Delete: Select this option to delete this menu item.

Creating a Dropdown Submenu 

Dropdown submenus are a great way to add more menu items to your website’s Navbar without making it look cluttered and take up too much space. And it’s also a lot easier for users to find what they’re looking for as these menu items would fall under a relevant parent category.

In Droip, you can create a Dropdown submenu using the Dropdown element from Element > Components.

Using the Dropdown Element

Below are the steps on how you can customize the Dropdown element to quickly create a dropdown submenu for your Navbar.

1. Grab the Dropdown element from the Elements panel & drag this into Navbar > Nav Menu > Nav Item > Link Block. Note that the Nav Item here has to be the one you want to make the dropdown submenu for i.e. it’ll become the parent menu item.
2. Since the Dropdown element already has a Text element, you can go ahead and remove the Text element inside this Link Block.  
3. Next, select the Dropdown Trigger, and from Style Panel > Stroke set the Border value to 0 so the label matches the others. You can also go ahead and remove the arrow Icon here.
4. Then, from the elements panel grab a Link Block and add it to the Dropdown Target. Then duplicate a Text element to add it inside this Link Block.
5. Now, change the Text element content and use the Link Block to add the appropriate page’s link.
6. To make it visually look more like a dropdown, you can also give the Dropdown Target a Background and adjust its Size and Position from the Style Panel.

📝 Note: If the Dropdown Target is not visible on your canvas, you might have to change its State to Show from the Dropdown Settings. To learn more check out the Dropdown documentation.

And that’s it! Now when you preview your website page, you’ll be able to access your dropdown by hovering over the parent Nav Item on your Navbar.

Link Settings

Now that you’ve added your Nav Menu Items, it is time to link them to their corresponding web pages. To do this, select the Link Block of one of the items. On the Link Block’s inline editor, click on the link icon to open up Link Settings.

Here, select the Link Type (e.g. Web Address), and then enter the relevant info in the following fields below. 

Select the Open in New Tab option if desired although nav menu links usually open on the same page. Follow the same steps to add links to other items on the Nav Menu. For more details, check out the Link Block documentation.

How to Make a Navbar Sticky

Making a Navbar sticky is always a great choice especially if your webpage is on the longer side as it makes it easier for users to navigate your website without having to scroll all the way up.

It also allows them to stay in the same spot on their current page while also opening a different link from the Navbar in a new tab or window.

To make your Navbar sticky, do the following:

1. Select the Navbar and navigate to Style > Position.
2. Set its position to Sticky.
3. Set the Top offset to 0% and the Left offset to 50%.

Tip: Make sure your Navbar is not within any Layout element for this to work properly! Also, from Style Panel > Position, set the Z-Index value to 100 so that the Navbar is always visible above all the other elements on the page.

Customizing the Navbar Structure

The Navbar Menu was created using Flex so you can customize its structure from Style > Structure as well as from its controller. To learn more about Flex and its structure settings, please visit its Flex documentation.

Creating a Vertical Navbar

By default, the Navbar Menu is horizontal. However, since it’s basically a flex, you can switch to a Vertical Navbar layout with only a few simple steps. 

To start, select the Navbar element, and from the Style Panel, go to Structure. Then, do the following:

1. Set Direction to Column.
2. Set Align to Flex Start.
3. And finally set Justify to Flex Start.

Also, while the navbar is selected, go to Style > Size and set the height to auto if isn’t already.

Next, select the Navbar Menu and do the following from Style > Structure:

1. Set Direction to Column.
2. Set Align to Flex Start.
3. And set Justify to Space Evenly.

Lastly, you can also define a specific width for either your navbar or its parent element so that it doesn’t take up the whole width of the screen. And voila, you have your Vertical Navbar ready!