navbar-main

When designing your app, the navigation bar is easily the UI element that stands out the most. It defines the rest of the design and that is what most users remember.

I decided to create this list of navigation bar designs for you to use in your app. They were inspired by lots of good design patterns all across the App store.

Browse and download the assets for the ones you like. You can find a sample Xcode project that implements them all at the end of the post.

Please share with your friends

Don’t hoard this, since we are all giving freely, please share this with your friends. You can do by clicking on the Twitter or Google+ share buttons on the left. I will appreciate that. Thanks.

Holborn

This set of navigation bars give your app a chalkboard effect. Great for educational apps and games.

Pimlico

The wooden effect has been made popular by apps like iBooks. In the three navigation bars below, we show a different take on the effect. Using two different textures and the classic one we are all used to.


Click here to download the Xcode Project and Designs

Vauxhall

Colorful and vibrant. Here are three navigation bars that make your app pop.

Hendon

The navigation bar looks like it is peeled off the screen. This gives your app much needed depth. Away with boring “flat” styles.

Belsize

Something design patterns from Android are actually good. I hate to say but I am a fan of the segmented nav bars you see on Android.

Here is an iOS-y take on those navigation bars.


Click here to download the Xcode Project and Designs

Sloane

Here is a more minimalist take on the “peeled-off” effect on the navigation bar. Similar to Hendon above, this will also give your app depth.

Richmond

Richmond combines a gray background with a colorful set of buttons for the UIBarButtonItem. Also, don’t miss the classy sweeping gradient on the bar.

Camden

Camden is a gives a different take on the Android pattern similar to Belsize above. The segmented navigation bar effect is more subtle.

I like this one a lot, what do you think?

Kensington

Last but certainly not least in the set is Kensington. The gradient on the navigation bar will make your app really stand out. It looks similar to the default iOS 6 navigation bar with a tint, but this gives your app a far from default look.

That’s all folks!

I hope you like this. Please let me know your thoughts in the comments.

Don’t forget to share!

Please hit the Twitter and Google+ button to the left and share this with your friends! Don’t be a hoarder.

72 comments

  1. wayneljw

    Thank you very much for the freebies. I truly love this project.

    One suggestion though. The modal view would not be dismissed in iOS 5 (simulator or real device). I figured out that in ThemeManager.m, all occurrences (9 times) of this line:

    [settingsButton addTarget:view.window.rootViewController action:@selector(dismissController) forControlEvents:UIControlEventTouchUpInside];

    should be replaced with:

    [settingsButton addTarget:[[UIApplication sharedApplication] delegate].window.rootViewController action:@selector(dismissController) forControlEvents:UIControlEventTouchUpInside];

    • Tope

      Thanks for the suggestion. I kind of decided to support only iOS 6 on purpose. You can tweak it for your needs though.

  2. Bob

    Thank you so much for these! Are you going to make iPad ones as well? All the apps I make are universal. So, I can’t really use these without iPad support. I would easily be willing to pay extra for them! Thank you again for making these and giving them to us for free.

    • Tope

      Hi Bob,

      Thanks for the suggestion. Maybe we will do that in v2.0 :-). no promises when that will be though

  3. Behzad

    AMAZING !!!! Does App Design Vault do Android as well ? I have an iPhone app that I need to expand on Android. Anyone you recommend ?

    • Tope

      No sorry we don’t. Funny enough, I don’t know anyone doing Android templates. maybe that’s a good idea for someone to run with

  4. AC

    Woah, real nice! Thanks! You say navbars but there’s entire background images/buttons in the resources. We can use all the resources in our projects or just the navbars?

    Really appreciate these.

  5. Russ

    You are THE MAN, Tope. I’m currently revising the UI in my apps, and this collection of awesome navigation bars couldn’t have come at a better time for me. Much obliged!

  6. Pingback: Extensive Collection Of Great Looking Free Custom iPhone Navigation Bar Graphics

  7. Peter

    Great job Tope πŸ™‚
    Tip: How about a “DL-all-stuff”-button at the end of this article, I just strained my mouse… πŸ˜‰
    Happy Coding!

  8. Pingback: Extensive Collection Of Great Looking Free Custom iPhone Navigation Bar Graphics | AppDevDigest.com – IOS Mobile App Development, Design and Business News Updates

  9. Chris Jones

    Argh, why are there so many asymmetries in these designs?! Almost nothing seems to be vertically centred and in most of them, things aren’t horizontally centred either (the most obvious example is Belsize – the Back and Cog icons are nowhere near the middle of their segments.

    I bet if those asymmetries were fixed up these would all look a huge amount more pleasing!

  10. Pingback: 9 Free Designs To Use For In App’s Navigation Bar | Mobile Orchard

  11. Ashish

    u just made an awesome contribution to the iPhone app development
    great work ! these r not just custom images but a complete set of tools for designing apps…
    hope to see some custom tab bar designs…

  12. Pingback: 27 Free Navigation Bar Designs To Use In Your iPhone App | iPhone and iOS App Design Templates | iPhone情報発俑局!

  13. Pingback: Top iOS Development Resources For Week Ended March 31st, 2013

  14. Zav

    You rock Tope. Hope to reward your efforts, gestures and good vibes with a purchase in the near future.

    Any tips on re-themeing TVC section headers?

  15. Prashanth

    Tope,

    This is simply awesome. This has helped me tremendously. The fact that you give away awesome stuff like this for free really inspires me to do the same. Thank you so much !

    Prashanth

  16. Pingback: LinkedIn Revamps Mobile Apps to Focus on Stories, Updates | Toki Solutions

  17. Matt

    This was such an awesome set of code that I spent most of the day porting it to C# and the Xamarin.iOS stack so I can use it for some other projects. If its ok with you Tope, can I put that out on github for others to use?

  18. Tom

    Great work, thanks for the free download, but I enter my email, got the email from mailchimp to confirm then nothing …. How can I get the xCode source please ?

    Thanks,

    Thomas Decaux

    • Tope

      hi, you should already have seen the link in the confirmation email sent to you.

      I will forward that to you now by email.

      Thanks

  19. ChavirA

    Love the designs, but looks like they’re not still sharing them, cause I set my mail and well… nothing.

    • Tope

      hi, you should already have seen the link in the confirmation email sent to you.

      I will forward that to you now by email.

      Thanks