Automatic iOS & iPadOS Adaptive Navigation

Zane Carter
1 min readDec 13, 2020

Thanks to iOS 14 & SwiftUI, making Universal Apps has become even easier. Making Navigation look good on both iPad and iPhone can still be a bit tricky though. TabBars make sense on iPhone but on iPad they can look a bit out of place. One good alternative is using the new sidebar.

Defining the same set of views for navigating twice (Once for iPad and Once for iPhone) is not the cleanest way to achieve this though.

For one of my Apps I solved this by creating an AdaptiveNavigation view.

Simple replace your root navigation view with an instance of AdaptiveNavigation . Pass it a title string and an array of AdaptiveNavigationItem instances.

You can instantiate an AdaptiveNavigationItem similar to how you would use a TabView and .tabViewItem . Pass it a destination and then a tuple containing an image and text, to make up the icon for Tabs and Sidebar list items.

See an example below.

Example Usage

Source Code

If this was useful to you chuck us a follow on twitter! 😄

Thanks!

--

--

Zane Carter

I make apps for the AppStore. Currently working on an app that makes gardening easier. Twitter: @iamzanecarter