Native Mobile / Components

Navigation bar

Also referred to as: Tab bar

Overview

  • Release version
    Yokohama
  • Available sinceMadrid
  • A11Y WCAG 2.1 AA
Figma link
Navigation bar Figma component

Figma library with components for designing Native Mobile.

Figma link
Native Mobile Components and variables

Figma library with components for designing Native Mobile.

ServiceNow Docs link
Navigation bar documentation

Implementation and administration guides

When to use

Use the navigation bar to provide quick access to a small set of key screens or features. It's ideal for up to five primary destinations that users need to reach frequently, offering a consistent and efficient navigation experience.

When not to use

Don’t use the navigation bar for secondary or infrequent actions. Instead, use menus, buttons, or other contextual navigation patterns to avoid clutter and ensure the bar remains focused on the most essential destinations.

Overview

The navigation bar displays multiple icons, called navigation tabs. Configure these tabs to navigate to launcher screens or screen within your mobile applications.

The navigation bar contains Settings and Notification tabs. Removing these tabs is possible, but prevents your users from accessing important information and features of the app. Consider changing the order in which they appear in the navigation bar rather than removing them.

You can use role restriction to further limit the number of tabs on your navigation bar. The required roles field on a launcher screen controls which users can see the launcher. Use this restriction to ensure your user only see tabs relevant to their work.

Navigation bar

Naming conventions

Give your navigation tabs a descriptive name that provides context. Avoid generic names like “Home” or “Apps”. Note the limited space available for titles in the navigation bar. When testing your application, watch for titles that do not completely display on the navigation bar.

The navigation bar can display up to five icons. If you have added more than five, a “More” icon is added to display the additional icons in a list. Try to limit your navigation bar to five icons to avoid requiring your users to take this additional step.

Make sure the icons are visually consistent and the text length is balanced.

Use capital case for your titles. For example, “Team Members”. Limit the length of your titles so they are not cut off when they are displayed in the navigation bar. If you intend to support multiple languages, consider the length of titles in each of the languages you intend to support.

Ordering

Ordering should be determined by level of importance top to bottom and left to right.

Use the navigation tab bar badging functionality to notify users of any new changes based on certain criteria. Configure navigation bar launcher screen tabs and screen tabs to display badge counts next to the tab bar icon. These badge counts indicate how many rows in the Badge Count [sys_sg_badge_count] table match a condition that you can configure. For example, how many work orders are waiting for your attention, or how many new and unread Sidebar messages have been received.

Navigation tab bar badging

Access control

You can restrict access to the navigation bar for specific users by assigning User Roles / User Criteria to each tab. Learn more in user segmentation.