nav
A car or phone system that shows a map and tells you how to get to a place.
An electronic navigation system in a car, phone, or other device that shows maps and gives routes and directions.
The part of a website or app with buttons or links that you click to go to different pages or sections.
The navigation area of a website or app, usually a bar or menu with links or icons that let users move between main sections or pages.
- Base: nav
- Plural: navs
bottom nav
5navigation menu at the bottom
A row of navigation buttons or icons at the bottom of a phone or tablet screen.
- Many mobile apps use a bottom nav with three to five icons.
- The search feature was moved into the bottom nav for easier access.
- Our design guidelines recommend a sticky bottom nav on mobile.
global nav
3navigation menu shown on every page
The navigation menu that stays the same on almost every page of a website or app.
- The logo in the global nav always links back to the home page.
- We added a language switcher to the global nav.
- The global nav must be consistent across all country sites.
main nav
1primary navigation menu
The most important navigation menu that links to the main parts of a website or app.
- Keep the main nav short so users are not confused.
- The blog link was added to the main nav after the redesign.
- Login and signup are both in the main nav on desktop.
side nav
4vertical navigation menu at side
A tall navigation menu on the left or right side of a website or app screen.
- The new dashboard uses a side nav for all tools.
- On small screens, the side nav collapses into an icon.
- We put secondary sections in the side nav to keep the top clear.
top nav
2navigation menu at the top
The main navigation menu that is placed across the top of a website or app screen.
- We moved all primary links into the top nav for better visibility.
- On desktop, the top nav stays fixed when you scroll.
- The logo sits on the left side of the top nav.