Navbar

What

A navigation bar, or navbar, is a narrow section with a home button and clickable icons representing the main areas of the app. It may also have a settings icon and/or a user avatar at the bottom.

Why

To give users a quick way navigate to main areas of the app

Where

Desktop: Vertically on the left hand side or on the top of the screen
Mobile: Horizontally on the bottom of screen

Best Practices

  • Use text with icons to give secondary means of recognition
  • Keep the number of icons/sections of app low to not overwhelm users
  • Mobile: Located at the bottom of the screen or hidden behind a “hamburger” menu icon

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...