How to design navigation for large and small screens

1. Information architecture and sitemaps

This lesson will show you tips about broad and deep hierarchies, classification schemes, and how to come up with your Information Architecture and Sitemaps.

2. Navigation design fundamentals

Navigation refers to all the elements that help people move between screens, on websites and mobile apps. It also helps them understand what the content is about.

3. Horizontal navigation for large screens

Navigation for a website can be dealt with bars, tabs, drop-down menus, mega-menus… Learn pros, cons, best practices, and how to organize your navigation elements.

4. Horizontal navigation for small screens

This video lesson will teach you the differences between bottom bars and top bars for mobile navigation, and how and when you should use them.

5. Vertical navigation for large screens

Bars, flyout and accordion menus, combined menus: everything you need to know about vertical navigation for large screens and websites packed in a short video.

6. Vertical navigation for small screens

Vertical navigation for small screens is usually hidden behind the Hamburger menu. Watch this video for pros, cons, and a little trick that can help your users.

7. In-page navigation

A lot of navigation happens in the page itself. Carousels and cards are the 2 most common kinds of in-page navigation, but you can use hyperlinks, too.

8. Supporting navigation

Breadcrumbs at the top and footers at the bottom of the page are elements that help support your other navigation. Watch this video for tips and best practices.