Navigation bar

  • Release version: Xanadu
  • Updated August 1, 2024
  • 2 minutes to read
  • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Navigation bar

    The navigation bar in ServiceNow mobile apps provides users with quick access to launcher screens, regular screens, settings, notifications, and saved records. It appears at the bottom of each mobile app and is preconfigured with essential tabs such as Notifications and Settings. When more than five tabs are added, a “More” tab appears to manage overflow.

    Show full answer Show less

    Key Features

    • Navigation Bar Components: Includes navigation bar tabs like Screen tab, Launcher tab, Saved tab, Notification tab, and Settings tab.
    • Screen Tabs: Directly link to calendar, custom map, list, map, or mobile web screens.
    • Launcher Screen Tabs: Provide access to dashboards (launcher screens) that contain shortcuts via icons, cards, media sections, or score counts.
    • Saved Tab: Displays a page with the user’s saved records.
    • More Tab: Appears when more than five tabs are present, allowing users to access additional tabs through a list view.

    Configuration Guidelines

    • Tab Limits: Keep the navigation bar to a maximum of five tabs to avoid reliance on the More tab and improve usability.
    • Default Tabs: Settings and Notifications tabs are included by default and removing them is possible but not recommended as it may limit user access to essential features.
    • User-Specific Tabs: Use user criteria permissions to show relevant tabs only to specific users while ensuring Settings and Notifications remain accessible.
    • Tab Naming: Use descriptive, context-rich, and capitalized names to improve clarity and avoid generic terms like “Home” or “Apps.” Consider the length of tab names to prevent truncation, especially in multi-language environments.
    • Icons: Choose visually consistent icons that represent the tab’s function clearly and avoid duplicating icons across different tabs.
    • Ordering: Arrange tabs based on their importance and consider language direction (left-to-right or right-to-left) for optimal user experience.

    Practical Benefits

    By configuring the navigation bar with these guidelines, ServiceNow customers can create an intuitive and efficient mobile app navigation experience that helps users quickly find and access key app features. Maintaining default tabs ensures access to critical settings and notifications, while limiting tabs and applying user criteria keeps the interface clean and relevant. Thoughtful tab naming and icon selection enhance usability across languages and user roles.

    User the navigation bar in your mobile apps to access launcher screens, screens, settings, and notifications.

    Figure 1. Navigation bar component hierarchy
    Navigation bar component hierarchy.
    The navigation bar consists of these components:
    • Navigation bar
    • Navigation bar tabs
    • Screen tab
    • Launcher tab
    • Saved tab
    • Notification tab
    • Settings tab
    Navigation bar tabs with More tab

    The navigation bar appears at the bottom of each mobile app. You can create navigation bar tabs in the navigation bar. Users can access launcher screens and regular screens within the navigation bar.

    Note:
    The navigation bar in each mobile app is preconfigured with Notifications and Settings navigation bar tabs. For more information about the content of these tabs, see Mobile app structure. There is also a saved tab, which displays a page showing the user's saved records.
    List displayed after a user taps the More tab

    When you add more than five tabs to the navigation bar, a More (More icon) tab displays. Tap the More tab to open a list view showing the additional tabs.

    Screen tabs and launcher screen tabs

    Figure 2. Screen navigation tab
    Screen navigation tab

    Use a screen tab to enable access directly to a calendar, custom map, list, map, or mobile web screen.

    Figure 3. Launcher screen navigation tab
    Launcher screen navigation tab

    Use a launcher screen tab to enable users to access elements in a screen launcher.

    Launcher screens are dashboards. They provide shortcuts to other screens and information. Shortcuts can be added with icons, cards, media sections, or score counts.

    General guidelines for the navigation bar

    Use these general guidelines when configuring your navigation bar.
    Number of tabs
    • The navigation bar displays up to five tabs. When there are more than five tabs an overflow tab, known as the more tab, (More icon.) is added.
    • Try to limit your navigation bar to five tabs, so that all the tabs are visible at all times.
    Tab types
    • By default, the navigation bar contains Settings and Notification tabs. Removing these tabs is possible, but might prevent your users from accessing important information and features of the app.
    • Rather than removing the Setting and Notification tabs, consider changing the order in which they appear in the navigation bar.
    • The Settings, Notifications, and Saved tabs navigate to specific pages, so only one of each tab is required. You can use multiple screen and launcher screen tabs, however it's suggested that you use no more than five tabs.
    Display specific tabs to specified users
    • Apply user criteria permissions, so users only view tabs relevant to their work. For more information, see User criteria permissions in mobile apps.
    • You should have the Settings and Navigation tabs available to users.
    Tab names
    • Give your navigation tabs a descriptive name that provides context. Avoid generic names like Home or Apps.
    • Use capital letters for your titles to make them stand out. For example, Open Tasks.
    Length of tab names
    • Limit the length of your titles so they aren't cut off when displayed in the navigation bar.
    • If you support multiple languages, consider the length of titles in each of the languages you support.
    • When testing your application, look out for titles that don't fully display in the navigation bar.
    Icon composition
    • The navigation bar icon color is determined by your application’s theme.
    • Select icons that are visually consistent and best represent the functions or information presented in that part of your application.
    • Avoid using the same icon for more than one navigation tab, so users can quickly find what they need.
    Ordering
    The order of the tabs should be listed in the level of importance. This order varies for left-to-right languages and right-to-left languages.