Sketch Tutorials

Designing a Top Nav in One Symbol

How to use nested symbols in Sketch to build a smart top nav

Download this demo file to follow along, and check out UX Power Tools to get the entire UI kit of symbols to build smart components like this one.

An app nav is just like one of those big maps at shopping malls. You know those massive, usually broken “touch screens” that show you:

All the cool stores (probably Abercrombie and Baby Gap)

(probably Abercrombie and Baby Gap) Where the bathrooms are (as far from you as humanly possible)

(as far from you as humanly possible) Where you can get free bourbon chicken samples (the food court 🙌🏻)

And after five minutes of searching…

Where the hell you are (“You are here ⭐️”)

This one is round, making it extra difficult to figure out where the hell you are.

The primary navigation of your web app is really no different. It shows you:

All the main feature areas

Where to adjust preferences and settings

How to get home

Where the hell you are

Let’s build one!