Navigation
Components
Navigation helps users move between different sections or pages of an application. It provides a consistent way to browse content, typically appearing as a horizontal menu bar or vertical sidebar with clear labels and visual hierarchy.
Checklist
Reset
Logo
Reinforce your brand at the top level on every page
Structure
Ensure your most important links are available at the high level, and links that are a level deeper are relevant and impactful to more niche users
Consider only two levels of hierarchy to reduce complexity
Ensure that each level of navigation has a different visual design to differentiate the levels clearer
Consistent location
Usually located at the top of the page as it is the most accessible, but it should always appear at the same location on every page
Visual contrast to rest of page
Make it clear for a user to easily see where they can visit other pages
This can be made more noticeable with a visual change after scrolling on a page, such as a different background colour or shadow
Call to action/s
The primary action/s you want users to perform
If you have multiple CTAs, be sure to visually structure them by level of importance, making your no.1 choice stand out
Mobile responsiveness
Consider a design for the mobile version of the menu as the screen size difference is enormous and will definitely affect your layout
Icons next to link
A visual cue can help break up lines of text
Icons next to link
Showing the current level and hierarchy of sections above the current page
