Navigation Bar

The Navigation Bar pattern allows users the ability to switch between application features. This is commonly called a tab bar. This pattern is a common method of navigation on the phone and a less common method on the tablet.

Appearance

Appearance characteristics for this pattern.

• Placement: The bar is fixed to the bottom section of the application screen.
• Tab Layout: Each tab within the Navigation Bar should display an icon centered in the tab, with feature name label beneath it.
• Tab Number: The number of tabs displayed in the Navigation Bar is dependent on the amount of space available on the device.
• Tab Layout: Inside a tab the icons are horizontally centered, with the feature name horizontally centered beneath the icon.
• Icons: Tab icons are can be virtually any color. Other tab icons could be implemented.
• Badge/Bubble: No default count bubbles or badges are available. Custom implementation could be done to support count bubbles or badges.
• For example a count bubble with a number or badge showing an indicator can display in top right corner of the tab image indicating a number could be developed.

Behavior

Common behaviors for this pattern.

• Placement: It will be fixed to the bottom section of the application screen. It will display on the screen above the footer, if the footer is present (not recommended).
• Selection: Tabs are mutually exclusive, so only one tab can be selected at a time.
• Visibility: The bar can be toggled on and off across the entire application. It can be programmatically hidden on some pages, but allowed to show on other pages.
• Contextual Tabs: The content of the tabs cannot change on different pages throughout the application.
• Selection: Tapping the control to hide the bar will slide the bar down, while tapping to show the bar will slide the bar up. Tabs are mutually exclusive, so only one tab can be selected at a time.
• Visibility: When the bar is hidden it is hidden on all pages of the application. When the bar is shown it is shown on all pages of the application.
• Orientation: On orientation change the spacing between tabs does not usually change.
• Overflow: A More tab is place on the far right end, that then displays a popup.
• Span: The Nav Bar will span the width of the display.
• Swipe: Used to open or close the navigation bar. Required for Windows.
• Keyboard: When keyboard is displayed, it will hide the nav bar if it is on the bottom of the display.

Usage

Usage guidelines for this pattern.

• Tab Number: On the phone up to 5 tabs can be shown. On tablet landscape orientation up to 9 tabs can be shown. On tablet portrait orientation up to 7 tabs can be shown.
• Overflow: When the number of tabs exceeds the maximum that can be shown, the last tab can read 'More..' and open a page that displays additional features.
• Selection: There should always be selected (i.e. highlighted) tab by default.
• Disabled: Tabs should not be disabled if the user cannot get to them; they should be removed.
• Footer: It is not recommended to show both a Navigation Bar and Footer at the same time, because both can be fixed to the bottom of the application screen.
• Drawer: It is not recommended to use a Navigation Bar with a Springboard due to the complexity of navigation.

Related

• Used On: Phone, Tablet
• Also Called: Bottom Navigation, Tab Bar, Nav Bar
• Related Components: Image, Nav List, Nav Bar
• Related Patterns: Drawer, Toolbar
• Resources: iOS Tab Bar, Android Bottom Navigation