Bottom navigation

The user needs the ability to access different subtasks, views or modes.

Problem

The user needs the ability to access different subtasks, views or modes.

Solution

Use this whenever you need to enable switching between views or different modes in an app.

Provide short descriptions and meaningful icons for destinations.

Arrange the icons proportionally to the available space. Render from 3 to 5 items at once. If there are more than five items provide a "More" button which will load a list of additional options that are available.

Avoid crowding the navigation bar with too many items. Having too many actions or views will physically make it hard for people to tap on the one they want. In addition to that, with each new item the complexity of the app increases.

Use scrollable bars with caution. Items that don't fit in the initial view of the navigation bar are not visible to the user. One of the main reasons to use a bottom bar for navigation versus other methods like a hamburger menu or drawer is that the options are instantly visible. If you end up using a scrollable bar make sure to signal that there is more to see. The interaction model should be clear to the user.

Make the currently selected item stand out by highlighting it.

Sometimes it is required to display additional data next to the actions, like the count of the items contained under a view. Use a badge and avoid overloading it with unnecessary text.

  • Tab bar
  • Show more
  • Badge
  • Scrollable
Showing 4 live examples
Tab bar
  • iPhone 6
  • Accessories
  • Compare
  • iOS 8
  • iCloud

iPhone 6

Bigger than bigger

Accessories

The perfect fit.
And finish

Make a statement. Cover every curve. Get fully charged. See all the essential Apple-designed accessories and more for iPhone 6 and iPhone 6 Plus.

Compare iPhone

Compare iPhone 6 Plus with iPhone 6
iPhone 6 Plus
iPhone 6
Overview
Available in silver, gold, and space gray, iPhone 6 Plus features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.
Available in silver, gold, and space gray, iPhone 6 features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.

The biggest iOS release ever.

iCloud

iCloud connects you and your Apple devices in amazing ways. It makes sure you always have the latest versions of your most important things — like documents, apps, notes, and contacts — on whatever device you are using. It lets you easily share photos, calendars, locations, and more with friends and family. It even helps you find your device if you lose it. And iCloud does it all automatically. Just like that.
Tab bar
This example should be experienced in full screen
View in full screen
Show more
  • Music
  • Film
  • TV
  • More
    • Films
    • The Lion King

      by Roger Allers

    • Grave of the Fireflies

      by Isao Takahata

    • WALL·E

      by Andrew Stanton

    • Princess Mononoke

      by Hayao Miyazaki

    • Return to Treasure Island

      by David Cherkasskiy

    • Cat City

      by Béla Ternovszky

    • Toy Story 3

      by Lee Unkrich

    • Inside Out

      by Pete Docter

    • The Mote In God's Eye

      Larry NivenJerry Pournelle

    • The Sword Of Truth Series

      Terry Goodkind

    • The Road

      Cormac McCarthy

    • Jonathan Strange & Mr. Norrell

      Susanna Clarke

    • I Am Legend

      Richard Matheson

    • The Riftwar Saga

      Raymond E. Feist

    • The Sword of Shannara Trilogy

      Terry Brooks

    • The Conan The Barbarian Series

      Robert E. HowardMark Schultz

    • The Farseer Trilogy

      Robin Hobb

      • TV
      • Inception

        by Christopher Nolan

      • Star Wars: Episode V - The Empire Strikes Back

        by Irvin Kershner

      • The Matrix

        by Andy Wachowski

      • Interstellar

        by Christopher Nolan

      • Terminator 2: Judgment Day

        by James Cameron

      • Back to the Future

        by Robert Zemeckis

      • The Prestige

        by Christopher Nolan

      • Aliens

        by Alien

      • A Clockwork Orange

        by Stanley Kubrick

      • 2001: A Space Odyssey

        by Stanley Kubrick

      • Metropolis

        by Fritz Lang

      • PK

        by Rajkumar Hirani

      • Blade Runner

        by Ridley Scott

        • Music
        • Hello

          Adele

        • Sorry

          Justin Bieber

        • Hotline Bling

          Drake

        • What Do You Mean?

          Justin Bieber

        • The Hills

          The Weeknd

        • Stitches

          Shawn Mendes

        • Love Yourself

          Justin Bieber

        • Here

          Alessia Cara

        • Lean On

          Major Lazer & DJ Snake Featuring M0

        • Where Are U Now

          Skrillex & Diplo With Justin Bieber

        • Roses

          The Chainsmokers Featuring ROZES

        • How Deep Is Your Love

          Calvin Harris & Disciples

        • Hey Mama

          David Guetta Featuring Nicki Minaj, Bebe Rexha & Afrojack

        • Daddy

          PSY Featuring CL

        • Dessert

          Dawin

        Show more
        This example should be experienced in full screen
        View in full screen
        Badge
        • News
        • People1
        • Messages9
        • Notifications
        New Flash episode
        9:00 PM today
        Morning workout
        Tomorrow Morning
        Best animal adventures for families

        A young panda tests his climbing skills at the Chengdu Research Base.

        Read more...
        Best places to test your survival skills

        A view across the Turnagain Arm on Alaska's Kenai Peninsula.

        Read more...
        Football
        8:00 PM tomorrow
        The world’s most extraordinary sleepovers

        Explore the azure depths with a stay at the Manta Resort's underwater room.

        Read more...
        Badge
        This example should be experienced in full screen
        View in full screen

        Problem

        The user needs the ability to access different subtasks, views or modes.

        Solution

        Use this whenever you need to enable switching between views or different modes in an app.

        Provide short descriptions and meaningful icons for destinations.

        Arrange the icons proportionally to the available space. Render from 3 to 5 items at once. If there are more than five items provide a "More" button which will load a list of additional options that are available.

        Avoid crowding the navigation bar with too many items. Having too many actions or views will physically make it hard for people to tap on the one they want. In addition to that, with each new item the complexity of the app increases.

        Use scrollable bars with caution. Items that don't fit in the initial view of the navigation bar are not visible to the user. One of the main reasons to use a bottom bar for navigation versus other methods like a hamburger menu or drawer is that the options are instantly visible. If you end up using a scrollable bar make sure to signal that there is more to see. The interaction model should be clear to the user.

        Make the currently selected item stand out by highlighting it.

        Sometimes it is required to display additional data next to the actions, like the count of the items contained under a view. Use a badge and avoid overloading it with unnecessary text.

        Share in SMS
        • SMS