Learn Ionic
We help you
get better at
creating
Ionic Apps

Best advice, how-tos, insights, detailed tutorials, step-by-step guides,
and free code examples from Ionic community leaders.

search icon
...
No luck finding what you are looking for?No luck? Try searching our Forum

IONIC

Navigation

TUTORIALS

Navigation is indeed one of the most important elements of UX that every developer must include on its checklist while creating any kind of app. A bad navigation can frustrate users to an extent that they end up uninstalling the app.

For Ionic Angular applications we use the Angular Router. It is a solid, URL based navigation library that eases the development process dramatically and at the same time enables you to build complex navigation structures.

When we talk about Navigation there are many things to be considered such as route guards, data resolvers, app shell components and loading strategies. This ionic tutorial covers this and much more

The following tutorials cover different aspects from Ionic routing and navigation. Also you will learn how to use route guards, how to navigate between pages, and how to send data between routes.

Integrations

Getting Started

Features

Authentication

UI / UX

UX Tips for your Ionic App - Navigation
Agustin Haller
ByAgustin Haller
Aug 27, 2020
10 minutes
beginner

UX Tips for your Ionic App - Navigation

Navigation is important to ensure your users will be able to use and find the most valuable features in your ionic app. Good navigation, like good design, is invisible. Learn the best practices!

Boost the UX of your app
Read Post
Ionic Tutorial: Build a complete mobile app with Ionic Framework
Dayana Jabif
ByDayana Jabif
Aug 14, 2020
45 minutes
beginner

Ionic Tutorial: Build a complete mobile app with Ionic Framework

Learn the core concepts of Ionic while building a real mobile app. The goal of this Ionic tutorial is to build the most complete Getting Started with Ionic Framework guide ever built. We want to help beginners through their first steps on the Ionic world. To help you through your Ionic learning process, we created an Ionic app with a question and answer format (Q&A), where users will be able to ask, answer and vote questions. Ionic CRUD with Backend and Database.

Free Ionic 5 Starter App
Read Post
Ionic Navigation & Routing: The Ultimate Guide
Agustin Haller
ByAgustin Haller
Jun 8, 2020
45 minutes
beginner

Ionic Navigation & Routing: The Ultimate Guide

Learn how to master Angular Routing and Ionic Navigation. Loading Stategies. Router Guards. Route Resolvers. App Shells. This tutorial also includes Usability tricks you can add to your Ionic Framework Apps to make them look even better!

Free Starter with lots of Navigation cases
Read Post
What's new in Ionic 5 - Migration and Free Starter
Agustin Haller
ByAgustin Haller
Mar 5, 2020
15 minutes
beginner

What's new in Ionic 5 - Migration and Free Starter

In this post we want to explain how to take advantage of the new benefits from Ionic 5. We will describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic Framework.

Free Ionic App Shell Components
Read Post
Ionic App Shell Components to improve User Experience
Agustin Haller
ByAgustin Haller
Apr 11, 2019
45 minutes
intermediate

Ionic App Shell Components to improve User Experience

UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this ionic tutorial, you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic Angular and some advanced CSS techniques.

Free Ionic App Shell Components
Read Post
Ionic 4 vs Ionic 3 — What you need to know about Ionic 4
Agustin Haller
ByAgustin Haller
Feb 26, 2019
20 minutes
beginner

Ionic 4 vs Ionic 3 — What you need to know about Ionic 4

Main differences between Ionic 4 and Ionic 3. Learn the new concepts of Ionic 4 such as Web Components and Compatibility with other Frameworks. Also, we will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

What's new in Ionic 4?
Read Post

Best Ionic Tutorials