Davide Biscuso

Practical guide to iOS Navigation Titles

One day, Me and Mikael were on a task on documenting navigation pattern on the EasyPark app and little to none we could find guidance on when to use Large title vs Inline navigation title.

Despite being a native iOS component and one of the most adopted pattern in mobile apps, there were no guidelines and use cases either on the Human Interface Guidelines and online articles, yet somehow most of the native apps we look at for inspiration implemented it correctly and consistently.

In Swift UI these two variants of the Navigation Bar title can be achieved by specifying the mode of the title to be inline.

NavigationView {
    Text("Page content")
        .navigationTitle("Page title")
        .navigationBarTitleDisplayMode(.inline)
}

Thats great! We know we have these two bad boys, but when to use one or the other? We both expected to find tons of online articles on Medium that would showcase and give guidance.

After some hours of search we ended up digging up a video at the WWDC with a brief explanation of its usage.

Root Pages

Large Title is recommended to use for those root pages (RootViewControllers) that are the start of the navigation and that direct to multiple other sub pages. Inline title are recommended for all those subpages.

Tabs

Large Title is recommened to indicate the main starting pages of tabs

Don't overuse

Apple discourage to use Large Title on all the pages, suggesting it might affect usability negatively. Instead use Inline titles to indicates which pages are less important in the information architecture and navigation.

Sheets

Even though it is never been mentioned anywhere, I could't find a single instance of sheet using Large Title. Instead contextual task presented in sheet