Do
Navbar
The navbar helps users know where they are on the product and quickly access other pages and features at any moment.
Usage
Used to display links to allow the user to navigate across a system. The first level of links is the primary navigation.
When to use
Use it when you need to provide to the user, content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.
Anatomy
Logo: On click, it allows the user to go back to the home page.
Link: A link with label that redirect the user to another page of the system.
Active link: The link to page where the user is there. It must be stand out to the other links.
A menu can also be composed of dropdown element, input text for the research and burger element.
Types
Desktop navigation
The horizontal menu can be used in different ways:
Hidden on a burger menu
Displayed at the bottom of the screen for an easy access of the items.
Mobile navigation
The horizontal menu can be used in different ways:
Hidden on a burger menu
Displayed at the bottom of the screen for an easy access of the items.
Placement
Place the menu on the top of the page. If the page is long or if the user needs to have access to the menu at any time, you can fix it on the page.
Do’s & Don’ts
Don’t
Do
Don’t
