A Complete Guide to Navbars | How to Choose a Perfect Navbar

Article

author small image Siva Kishore G
Posted : 16 June 2022
Modified : 28 Jul 2022
Beginner Developers

Introduction : What is a Navbar

Navbar or Navigation bar is a common terminology used in web design where one would find the links to other pages. It's customary to see the navbar at the top of the website with the logo aligned left and links aligned right.

How to choose the perfect navbar for your website

Speaking of SEO, there are quite a few aspects to follow in choosing the perfect navbar for your website.

  • Stick with the convention. Place the navbar on top.
  • Reserve at least 100px for height of the navbar.
  • Limit the number of nav links to 5-6.
  • Try to limit the words of the links to a max of 2. One word is better
  • Avoid login, password fields in navbar.
  • Limit the width of the search bar to a maximum of 320px.
  • Responsive navbars are the new norm.
  • Consider using bootstrap.
  • Choose colors that accents the brand logo.

The Color Theory

Colors play a crucial role in human psychology. Colors dictate how the user perceives the website.

Different colors and their messages with brand logos

Target device

Is your website mostly viewed on mobile devices?

Then make it non intrusive. For example, get rid of fixed navbars because there is only a limited place available on mobile devices and we don't want to cover it up with navbar.

But if fixed navbars are intended then have them only be fixed upto medium device breakpoints. In other words, use media queries to not include the small devices

Adding components to your navbars

Add Schema

Schema.org is a community developed JSON structured data. It is estimated to be used by over 10 million websites. The idea here is to provide structured data to the bots when search engines crawl the website. Every website element can have its own schema for example, food recipes, breadcrumbs, local business, articles etc.

For this case you can use the SitenavigationElement

Add Search

It is very common for ecommerce websites to have search functionality in the navbar. It is also common for them to autocomplete / autosuggest based on the user's input.

Add Logo to navbar

Prefer transparent pngs with higher resolution.

Navigation bar HTML Code

Plain HTML & CSS

Use media queries to achieve mobile responsiveness. 

<nav>
  <ul>
    <li><a href=""><img src="/static_files/images/logos/logo_1.png" height="32" /> </a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a></li>
    <li><a href="">Page 3</a></li>
  </ul>
</nav>

Consider Using Bootstrap

Bootstrap is a very common framework web designers use since it's very easy to achieve mobile responsiveness with very few lines of code (CSS Classes to be exact). Most of the required functionalities already exist so that we don't have to reinvent the wheel. Predefined elements such as navbars, modals, tooltips, accordions etc are available.


Post a comment

I promise, I keep it clean *

Comments

Alert SVG Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.