Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube

Navbars / Navigation bars (UI / UX)

Owned by Nathan Wailes
Last updated: Jan 13, 2018
5 min read

  • Save users time.
    • Make it fast for them to find what they want and go where they want to go.
    • Things that are used frequently should be bigger / more-prominent.
    • Things that are used frequently should be distinctive; they should be set apart by their coloring.
  • Don't just have the text of your nav elements clickable; make a rectangular section of the navbar (including above and below the text, and with some padding on the side) clickable.
    • Examples
      • Facebook 
      • Nomad List 
      • Stack Overflow 
      • Sourcetree 
  • If you're using a flat color for your navbar, consider adding a single pixel line at the bottom (or a 0.1vh) of it that's just a little darker, to make it look a little 3D.



  • Cloud9
  • Facebook
    • Overview
      • It has 9 choices: homepage (via the logo), search, your profile, the homepage (again), pending friend requests / suggested friends, private messages, notifications, privacy shortcuts, and a small button that produces a dropdown for advanced stuff like settings, dealing with pages, groups, ads, logging out(!), and help.
      • Logo:
        • Interestingly, rather than spell out the name of the site, it just has the 'f' logo. But next to it, in the search box, it says 'Search Facebook' instead of just 'Search'.
  • Hubspot
    • Note how they have just one bar, with the navigation items in-line with the Hubspot logo, search bar, and user profile.
    • The navbar is black. Is that to visually-separate it from the browser navbar?
  • Origami Simulator
  •  SourceTree
      • Note how the top menu-bar is narrow, like a typical desktop application, but the menu-bar beneath it is wide, like a web app.
      • It seems like the heuristic they're using is, "Things which users are going to be clicking more frequently should be easier to click. Things which users will be looking for more frequently should be easier to find."
      • Also note how, because it's a desktop application, they can't have the "File, etc." menu-items up at the very-top, in-line with the logo. So there's a lot of dead space in the top bar.
        • On the other hand, Chrome does use the topmost level:  So it seems to be possible. Maybe it's just not easy, or maybe it's not worth the effort or potential confusion to the user (i.e. Sourcetree isn't that pressed for more screen space).

      • They never go more than two levels deep on the menu items, and I only saw three menu-items that had a second level.

      • I'm not sure what the reasoning was for having the dead-space directly underneath the menu name.
      • It seems pretty clear that the horizontal lines are intended to visually-group related options.
  • StackExchange
    • Overview
      • There are only 5 buttons and a 'Search' box, so 6 total choices.
      • As with Hubspot, the navbar is black. I'm guessing that's to visually-distinguish it from the browser navbar.
    • Search box:
      • There's no 'click-to-search' button. You have to press 'Enter' to search.
    • Profile button:
      • The user's profile image shows up in the navbar, which I guess lets the user know at-a-glance that they're logged in.
    • 'help' button:
      • Interestingly, one of the few things on the navbar is a 'help' dropdown.
      • It has 5 options.



  • One thing I'm noticing is that websites seem to usually have a navbar color which is very different from the grey of the browser's navbars.
    • I'm guessing this is to draw the user's attention, so the user doesn't accidentally overlook the navbar.


  • The padding on the left side of the logo should maybe match the space between the logo and the name of the side.
  • When sizing the logo, it may look nice to have it sized such that the spacing on the sides is the same as the spacing on the top and bottom.
  • General takeaway
    • If your users are sophisticated, you may be able to slightly de-clutter your navbar by getting rid of the 'click-to-search' button.
      • Examples:
        • StackExchange does not have a 'click-to-search' button
        • Facebook does but it's visually-integrated into the text box so that it doesn't look like a distinct thing.
        • YouTube does, and it is darker than the search box so that it looks like a distinct thing.
        • Google's homepage does if you go to www.google.com, but if you open a new tab in Chrome it does not.
    • If users typically search for the same thing across multiple visits, you may be able to improve their experience by offering suggestions via a drop-down menu.
      • Example: Facebook has a drop-down menu when you click into the search box, whereas StackExchange doesn't.
  • Examples
    • I


  • It seems to be "normal" to have the log in / sign in button on the far right of the navbar, so it's probably best to position it there.
  • Genius 
  • Medium 



Follow me on Twitter