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)
- Where the bathrooms are (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 ⭐️”)
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!
We’re going to build a super basic top nav that has all of the most common pieces you’ll find in 95% of all web apps. Those pieces are:
- The Logo
- The Pages
- The Actions
- The Profile
- The Background
Here’s a fake top nav I made for an app called Portobello. I guess it’s an app for mushroom recipes? I don’t know, but I call dibs on that name.
Let’s break it down.
Before you do anything, make your logo into a symbol. I usually have two versions: Full Color and Mono:
- Full Color: A vector version of your logo in full color
- Mono: A vector version of your logo, masked, with a color symbol over it. This will allow us to swap the logo color to something else if it ever becomes necessary. For more info on color symbols, check out one of my favorite articles by Francesco Bertocci (I stole this technique from him, so I feel indebted to him every time I use his technique):
I always wanted to create a single version of an icon and apply different colors to, or tint it, to indicate its state…medium.com
These will come in handy down the road; sometimes your top nav will be on a light background and require a dark logo. Other times it will be over a dark background and require a white logo. Being able to swap these out without creating a whole new symbol is super convenient. Remember that these two logo symbols need to be the exact same size, otherwise you won’t be able to swap them in the symbol override menu:
The two navs in the screenshot below are the exact same symbol:
What did we learn about logos?
Use a logo symbol so you can easily swap out the color to accommodate light or dark backgrounds. Bellissimo!
The pages are really the entire reason why I thought this article was worth writing. Throughout my design career, I’ve used about a dozen different techniques to represent “this page is active” in a navigation bar. Those include, but are not limited to:
- No symbols at all! Seems like a swell idea until you’re using the nav on 53 different pages and someone (probably the client) decides to add a new page, and you have to go back through and update EVERY DESIGN. No thanks. 🤤
- Symbol + Whiteout: You know, like when you make the nav a symbol, then put a block over the element that you need to be selected, then rewrite the page name in a different color to make it look selected:
Anyway, suffice it to say there lots of inefficient ways to design a nav, so it’s worth putting in a little extra effort to make it sustainable in the long run (that is, as you design dozens — nay, hundreds — of screens for your clients).
I’ve written about text symbols in several other articles, so if you need a refresher, go check this out (in the section called The Button Text):
Buttons like you’ve never seen them before! Probably.medium.com
The basic principle is I’m using text symbols for each of my nav items so that I can easily swap the text to be different colors:
Now this probably isn’t the most accessible nav, because it can be a little tricky distinguishing between the white active page and the semitransparent inactive pages. In that case, we can just add a symbol with a bottom border to each item in our nav, then toggle that on or off:
And here’s how I can switch my symbol to highlight a different page. Yes it’s a couple extra steps, but it’s going to make things more efficient over time.
What did we learn about nav pages?
Use text symbols so that you can easily toggle pages to be on or off. Text symbols also allow you to toggle between light and dark text, which is useful for when your background color varies.
You can kind of put whatever the heck you want over here. I’m just using icons, but you might have something like a search bar:
That’s just another “Text Field” symbol I created that I can easily turn on or off, depending on whether or not I need it.
The important thing to note here is the color masking technique used in each of these icon symbols (refer to Francesco’s article from earlier). This gives me flexibility to use this nav over a dark background and use white icons, or a light background and use dark icons.
Maybe you want a notification badge?
Just make another “Badge” symbol and drop it into your top nav symbol. You’ll be able to override the number and the color however you want.
Change the number, or just hide it completely:
What did we learn about actions?
Icon symbols with color masking make it easy to toggle between light/dark icons. Additional symbols like badges can be added, then toggled on or off depending on the state needed.
Here are some of my favorite tips for including profile photos in your nav:
- Make your user avatar a symbol: Frankly, I don’t know why I never did this until about a month ago. If you’re designing for a multi-persona or multi-role product, it’s best to have a User/Avatar for each persona. For example, I’m designing an app with a dashboard for the client, and a separate dashboard for the freelancer who works for the client. I created two symbols for each user/persona so I can reuse them throughout the app. That way I’m always using the same photos for each user:
- Make a default avatar: Never depend on the user to really do much of anything at all, especially when it comes to uploading a custom profile photo. Social sign-on helps, but there will still be cases where you have an empty profile photo. So what are you going to show? Figure that out, and make an avatar symbol just for that empty state:
Here it is in a real-world example:
What did we learn about the user profile image?
Use symbols for the user profile, and create other avatar symbols for each additional user persona. A default state avatar symbol is also useful for when the user’s profile photo is blank.
Last but not least, the background. Not-so-shockingly…this is also a symbol.
Remember all of those Mixin/Fill colors we made for coloring our icons? We’re going to use those again, but this time without any masking. It’s white in the image below, so just use your imagination and picture a rectangle…
Why is this useful?
Well since it’s a nested symbol, we can turn it on or off. This is nice because sometimes I want a background, and sometimes I want it to float on top of an image.
Because it’s a nested symbol, I can easily toggle it on or off:
What did we learn about the nav background?
A nested symbol for the background allows us to turn it on and off, making it easy to see the beautiful photo underneath ❤️
Symbols in Sketch are so powerful, and will really make your life easy if you get creative. The biggest lesson here is to always think ahead; if your symbol has multiple states, consider if there’s a way to combine all of those states into a single symbol. After you’ve designed 76 screens for that “Uber for Dogs” app, you’ll want a quick and easy way to make changes to common UI elements without spending your time updating individual screens. No one likes that.
Buttons like you’ve never seen them before! Probably.medium.com
Warning: More GIFs than the peanut butter aisle.medium.com