Components
Navigation Bar
Sidebars are a form of navigation. They provide access to primary content
Anatomy
The Navigation Bar component, also known as a Navbar, is a user interface element that provides a menu of navigation links for users to access different sections of a website or application.
- Brand/logo: The visual element that identifies the website or application.
- Navigation links: The links that navigate to different sections or pages of the website or application.
- Dropdown menus: Additional menus that provide access to sub-navigation links or additional functionality.
Usage
The Navigation Bar component is used to provide users with easy access to different sections or pages of a website or application. It is commonly used in web applications, online stores, and other contexts where users need to navigate through a large amount of content.
Common places buttons appear: Mobile app homepage , website homepage and other pages when needed etc.
When to use
- When you have multiple sections or pages that need to be accessed by users.
- When you want to provide a clear and consistent navigation system for users.
- When you want to improve the usability and user experience of your website or application.
When not to use
- When there are only a few pages or sections that can be accessed through the website or application.
- When the Navigation Bar would add unnecessary complexity or clutter to the interface.
- When the Navigation Bar conflicts with other design elements or branding.
Accessibility
If your Nav items lose meaning by being truncated, they might benefit from being styled to wrap their text instead. Although the full text is exposed in a tooltip, that tooltip is not accessible through the keyboard, touch, voice control, or other assistive tech without hover functionality. Other things to consider are:
- The Navigation Bar component should be fully accessible to all users, including those with disabilities.
- Use semantic HTML elements to ensure that the component can be understood by assistive technology.
- Provide clear and descriptive labels for the navigation links and dropdown menus.
- Use ARIA attributes to provide additional information to assistive technology.
- Ensure that there is sufficient color contrast between the text and background to make it easy to read, especially for users with low vision.
Do
Use a same design or labelling for all of navigation links. So it looks consistent and easy to understand the function of the navigation links.
Don't
Use a different design or labelling for all of navigation links. So it looks inconsistent and confusing to understand the function of the navigation links.
Content
When creating Navigation Bar :
- The Navigation Bar should provide clear and concise labels for each navigation link and dropdown menu.
- Use appropriate language and tone for the content of the navigation links and dropdown menus.
- Provide a way for users to search for content within the website or application, if appropriate.
- Include any relevant links or additional information that can help the user navigate the website or application.
Do
Use a same design or labelling for all of navigation links. So it looks consistent and easy to understand the function of the navigation links.
Don't
Use a different design or labelling for all of navigation links. So it looks inconsistent and confusing to understand the function of the navigation links.