How to Design a Great Navigation Bar

✦ Tip 1: Choose the right sizes, padding, and margins

Creating the right anatomy for your bottom navigation is like crafting a tailor-made suit: it needs to fit perfectly with the device it’s designed for.

In the image above you can see detailed properties for navigation on iPhone 14 and iPhone 15 Pro. But these are guidelines, not rigid rules.

The key is to adapt and experiment to find what works best for each device. Why does this matter? Well, on smaller devices, a more compact navigation bar might be more appropriate. A bulky bar can eat up valuable screen space, making the app feel cramped. The goal is to balance visibility and accessibility without overshadowing the main content.

Generally, an icon size of 24px strikes a good balance. It’s large enough to be recognizable but doesn’t dominate the screen. The home indicator, that dark bar at the bottom, typically takes up around 34px.

When it comes to labels, the sweet spot is around 10–12px. Smaller text risks accessibility issues, making it hard for some users to read. On the flip side, larger text can create clutter and draw attention away from the main content. Remember, labels are there to guide, not to overshadow.

Designing for 2–3 different mobile device widths is a good practice. It ensures your navigation bar looks great and functions well across a range of devices.

✦ Tip 2: Limit the number of tabs to 5

Having too many tabs in the bottom navigation can lead to a cluttered and confusing user experience. Overloading this space with excessive options not only makes each tab smaller and harder to accurately tap, especially on mobile devices, but also overwhelms users with too many choices. This can lead to what’s known as ‘choice paralysis,’ where users find it difficult to make a decision because of the sheer number of options presented to them.

The golden rule? Aim for around three to five tabs. This range is the sweet spot for bottom navigation. It gives users enough options without crowding the space. With fewer tabs, each one gets more breathing room, making them easier to tap and reducing accidental clicks. This also makes your app feel more organized and easier to navigate.

Focus on what matters most. Choose tabs that are essential to your app’s core functions and what users need most often. This way, your users have everything they need at their fingertips, without the extra clutter.

✦ Tip 3: Design thumb-friendly tap areas

A common convention is to use a tap area that is large enough to be easily tapped with a thumb. This usually means having a tap area of at least 44px by 44px. This size is not just a random choice; it’s based on the average size of the human thumb, which ensures that most users can comfortably and accurately tap the navigation items without accidentally hitting the wrong one.

Why is this important? First, it improves the overall usability of your app. Users are likely to navigate using their thumbs, especially on larger devices. A larger tap area reduces the chance of errors and frustration, making the app more user-friendly. Second, it enhances accessibility. Not all users have the same level of dexterity, and a generous tap area ensures that the app is more accessible to people with varying motor abilities.

In contrast, a smaller tap area, like 24px by 24px, might lead to frequent mis-taps and a poor user experience.

✦ Tip 4: Differentiate active and inactive states

Differentiating the active state in bottom navigation is essential for a smooth user experience. It’s about making it immediately obvious to the user where they are in the app. A smart way to do this is to change the style and color of the active icon. Imagine an icon that shifts from an outline to a filled version, along with a noticeable change in color. This visual cue quickly directs the user’s attention to their current location.

Enhancing this distinction, you can also make the label text for the active icon darker and thicker. This simple adjustment reinforces the user’s focus on the active state. The combination of a transformed icon style, a standout color, and bolder text works effectively to differentiate the active tab from the inactive ones.

Conversely, a design that only alters the text, leaving the icon unchanged, might not be distinct enough. In such cases, users might take longer to identify their current position in the app, potentially leading to a less efficient and more frustrating navigation experience. It’s important to strike a balance and ensure that the active state stands out clearly for effortless navigation.

It’s also perfectly acceptable to keep the icon outlined instead of filling it in, as long as you change its color. The key is to implement at least two types of modifications — such as the color of the icon and the text. This dual change ensures users can effortlessly distinguish between active and inactive tabs, enhancing their navigation experience in your app.

✦ Tip 5: Keep navigation labels short and sweet

When it comes to designing your bottom navigation bar, less is definitely more. Opt for concise, one-line labels to keep the design neat and effective. Avoid long labels that spill over two lines — they can clutter the screen and overwhelm your users. Plus, they tend to make the navigation bar too big, which can throw off the balance of your app’s layout.

Short labels simplify things, helping users make quicker, more instinctive choices. They also add to a clean, contemporary aesthetic, ensuring your app is both stylish and functional.

✦ Tip 6: Stick to one icon style, except for the selected state

Mixing filled and outline icons in the same navigation bar is like inviting guests to a black-tie event and then having someone show up in beachwear. To avoid this visual mismatch, stick to a consistent style of icons throughout your navigation.

If you decide on outline icons, use them across all tabs. This creates a harmonious and professional look. However, there’s a clever exception: the selected state. Here, switching an outline icon to a filled version is a fantastic way to highlight the active tab. It’s like giving that tab a special badge of honor, making it stand out in a subtle yet effective way.

Also, be mindful of the complexity of your icons. Consistency isn’t just about style; it’s also about complexity. If one icon is simple and clean, the others should follow suit. Mixing a basic icon with something more intricate can throw off the visual harmony of your navigation bar.

✦ Tip 7: Avoid using too many colours

Using too many colors or assigning a different color to each tab can be counterproductive. Multiple colors can create a visually overwhelming experience.

An overabundance of hues can distract users from the content, making the navigation process more about understanding colors than intuitively moving through the app.

You want a unified look that ties the entire app together, not a palette that pulls it apart. Sticking to your brand’s color scheme reinforces brand identity and ensures a professional appearance. Too many colors can clash with your brand’s visual language and dilute its impact.

✦ Tip 8: Use notification badges in bottom navigation to highlight updates

Using notification badges in your bottom navigation bar is a great way to signal new updates or messages to users. These badges can be simple colored circles, or they can include numbers to indicate the quantity of new updates.

Badges should be small enough to not overpower the icon but large enough to be noticeable. Placing them in the top-right corner of the icon is a common practice, as it’s naturally eye-catching. Our pro tip for you is to use outline around them, this will take it to the next level.

If you’re using numbers within the badge to indicate the count of new updates, ensure they are easy to read. Avoid overly small or stylized fonts that might be hard to decipher at a glance.

Choose a badge color that stands out against the navigation bar and icon colors, yet remains consistent with the overall app design.

Only use badges for essential notifications. Overloading users with badges for every minor update can lead to notification fatigue and reduce the effectiveness of this feature.