How to design a bottom navigation bar

Fix the height and the number of destinations

A bottom navigation bar is the only part of a screen that shows up on every screen, so it should be the part you decide once and then leave alone. Pick a height, pick a count, and treat both as fixed. In App Builder the bar is a component you place inside a frame, so the height is a number you set rather than a feeling you hope for.

Three to five destinations is the workable range. Two reads as a switch rather than navigation, and six turns into a row of icons nobody can tell apart. If your product seems to need more sections, the answer is usually a second level reached from one of the main destinations, not another tab.

Set the height before you fill the bar. Decide the bar is 56 pixels tall on a mobile frame, place it, and only then add items. If you add the items first, the height grows to fit them and the bar stops matching every other screen with the same set.

• Three to five destinations, decided before you draw any of them
• One fixed height, written down, applied to every screen
• Extra sections go behind a destination, not into the bar

Note: A container whose width or height is left at zero hugs its children, so give the bar a real fixed height. A bar with no explicit height grows with the longest label and drifts out of alignment from screen to screen.

Use the same labels on every screen

The label on a destination is a promise about what the user will find there, and it has to be the same promise everywhere. If one screen calls a section Inbox and the next calls it Messages, the user has to read the bar again to work out whether they are in the same place.

Pick one word per destination and write the list down before you build the first screen. Home, Search, Saved, Profile is a reasonable set. The exact words matter less than the same four words appearing in the same four slots, in the same order, with the same capitalization on every frame. The mobile app screen guide covers the rest of the screen around the bar.

• One word per destination, written down before you draw
• Same word, same slot, same order on every frame
• Labels short enough to sit side by side at 390 pixels wide

Note: Label length is part of the decision. Four different word lengths look uneven in a 390-pixel-wide bar, so shorten the name in the product rather than shrinking the type in the mockup.

Decide what the middle item does

A middle item is a special case, and the specialness has to be deliberate. The usual choices are a primary action such as Add, a highlighted center piece, or no center item at all. All three work. What does not work is a middle item that looks decorative in the mockup and does something ordinary in the product.

If the middle item is an action, give it a shape that differs from the other four and keep that shape wherever it appears. An action in a bar is not a destination, so it should not be styled like one and it should never take the selected state a destination takes.

• A center action is styled differently from a destination
• It never takes the selected state that a destination takes
• One sentence explains what it does for whoever builds it

Note: Prototype links in App Builder are frame-level. A center action cannot open a screen by itself, so set On tap go to on the frame and describe the behavior in a short note beside the bar.

Anchor the bar to the bottom of the frame

A bar floating in the lower third of a frame looks like a bar nobody has placed yet. Anchor it: the bottom edge of the bar sits on the bottom edge of the frame, and the bar spans the full width. In App Builder that is a position plus a constraint, and the difference shows the first time the frame changes size.

Set the bar to stretch horizontally and pin it to the bottom, then give the content above a bottom constraint that stops at the top of the bar. Add bottom padding equal to the bar height so the last row of content is not crowded. A bar held by a dragged position drifts as soon as the frame resizes, and drift is the first thing a reviewer sees.

1. Place the bar. Drop a Tab bar component into the bottom of the mobile frame and set its height to the number you decided on.
2. Stretch it. Set the horizontal constraint to stretch so the bar spans the full frame width at every size.
3. Pin it. Set the vertical constraint to bottom and stop the content container above the bar.

Keep the bar identical across screens

Copying a bar does not guarantee it stays identical, because the copy can be nudged, resized or quietly rebuilt. Duplicate it with Ctrl/Cmd+D and then check the copy against the original instead of trusting the duplication. A bar that is two pixels taller on one screen is the kind of detail that turns into a comment in review.

The Tab footer component in the insertable library is built for this. Insert it rather than assembling a bar from scratch and the destinations arrive in a consistent arrangement every time. The library holds seven components: Stat card, List row, Form field, Call to action, Empty state, Nav header and Tab footer.

Make one screen the reference. When you build a new screen, place the reference bar and change only what the screen genuinely requires. If a screen seems to need different destinations, ask whether it is a different area of the product first. More often it is a new section, not a new bar. Holding the bar to one pattern is the same discipline as the spacing scale in the guide to create a design system for mockups.

• Duplicate with Ctrl/Cmd+D and compare the copy against the original
• Use the Tab footer component rather than hand-building every bar
• One screen is the reference for height, gap and label style

Check the bar against the frame edge

The last check is the edge itself. Look at the bar and the frame boundary together: does the bar touch the bottom and both sides, is there a hairline of background below it, and does the content stop cleanly at the top of the bar? These are small errors that read as carelessness and are quick to fix in the editor.

Check the bar on the narrowest frame you support, the iPhone SE preset at 375×667. A label that fits at 390 can crowd at 375, which is where you find out whether you had too many destinations or words that were too long. Fix the problem at the narrow frame, because every larger frame will be fine once it is. The wider product tour is in the complete Canvasola guide.

• The bar touches the bottom edge and both sides, with no gap below it
• The content ends cleanly at the top of the bar
• Checked on 375×667 as well as the default 390×844

Note: The bar belongs to App Builder. The freeform canvas holds drawing elements only, so keep this work inside frames. Everything described here applies to the app builder views described in the wider product tour.

A checklist you can reuse

• The bar has a written-down height and the same height on every screen
• The bar holds three to five destinations and no more
• Every destination has one word, and the same word appears on every screen
• The bar is pinned to the bottom and stretches the full width of the frame
• The content area stops above the bar instead of running underneath it
• A center item, if there is one, is styled differently from the destinations
• The bar has been checked on the iPhone SE 375×667 preset

Common mistakes to avoid

• Growing the bar to fit the items. If the height changes every time you add a destination, no two screens match. Set the height first and make the items fit inside it.
• Renaming the bar per screen. A destination called Inbox on one screen and Messages on the next makes every trip through the app feel like guessing. Keep one word per slot.
• Positioning the bar by hand. A bar held by a dragged position drifts the moment the frame size changes. Pin it to the bottom and stretch it horizontally with constraints.
• A decorative center button. A highlighted middle item that does nothing special in the product only adds noise. Give it a real job or leave the slot out.
• Adding a sixth tab. Six destinations turn a bar into a row of icons. Put the extra section behind one of the main destinations instead.

Frequently asked questions

How many tabs should a bottom navigation bar have?

Three to five. Two reads as a toggle rather than navigation, and six or more makes every item narrow enough to lose its label. If the product seems to need more sections, keep three or four main destinations and let each one open a screen that holds its own options.

Should the bar appear on every screen?

Only on the top-level screens. A form that takes over the screen, a detail view or a modal usually hides the bar, because the user is one level deeper and the destinations are not available. Mark those frames and leave the bar off them so it keeps meaning something.

Can I save my own reusable bar?

No. Canvasola ships seven insertable components in the App Builder library, and Tab footer is the one built for a bar, but you cannot define your own reusable components. The practical answer is to duplicate the bar from a reference screen and treat that screen as the pattern.

What if the labels do not fit?

Shorten the word in the product rather than shrinking the type. Four different label lengths look uneven in a 390-pixel-wide bar, and the cheap fix at design stage is a shorter name. Check the narrowest preset, the iPhone SE at 375×667, before you settle on the set.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.