Navigation and Navigation Bar

December 28, 2020

Why Website Navigation?

  • Websites are rarely single pages
  • Need to provide visitors an intuitive means of getting around your website
  • Several commonly used navigation patterns used on websites

Information Architecture

  • Structure of a system with respect to the way the information is: – Organized, – Labeled, and – Navigation methods provided to access the information
  • Need to consider when designing websites
  • Dictates the provisioning of navigation on websites

Website Hierarchy


Navigation Bars

  • Users often expect it at the top of the website
  • Contains links to various pages within your website


  1. Use simple, user-friendly terms
  2. Standardize navigation
  3. Provide indication of the location within the navigation hierarchy
  4. Use standard web conventions:
  5. Clicking on a logo takes you back to home page


  1. Have too many items
  2. Use generic labels



  • Secondary navigation – Usually placed below the primary navigation and above the content
  • Indicator of the current page’s location within a navigational hierarchy – Path based: set of steps – Location based: hierarchy – Attribute based: set of choices

Other Navigation Aids

  • Tabs
  • Pills
  • Pagination
  • Dropdowns
  • Accordion
  • Tags/ Tag clouds
  • Scrollspy
  • Affix