Add a page to the navigation

  • Release version: Australia
  • Updated August 6, 2026
  • 1 minute to read

    • Add pages to the navigation to make them accessible from other pages, such as a home page.

    About this task

    Some pages are added to the navigation by default when you create them. For pages that aren't added automatically added to the navigation, use the following procedure to make them display and accessible via other pages.

    The following procedure describes how to complete this task manually. You can also complete the task using agentic development tools, such as Claude Code.

    Before you begin

    Role required: none

    The ServiceNow® AI Experience Lab for VS Code extension requires the following:
    Application Version Resources for more information
    Visual Studio Code 1.97 later Visual Studio Code updates
    Node.js 24 or later Node.js
    pnpm 10 or later pnpm
    ServiceNow SDK 4.10 or later ServiceNow SDK
    ServiceNow instance
    • Australia Patch 5 or later
    • Zurich Patch 12 or later
    		 Prepare your upgrade

    Procedure

    1. Select the ServiceNow icon in the side panel to open the ServiceNow® AI Experience Lab for VS Code extension.
    2. Open a net new or extension experience.
    3. Optional: If your project doesn't already have an application.js file, at the experience folder root (not under src/extensions/), add an application.js file.
      Tip:
      Use the nav helper API from @servicenow/aiux/aiux-components-nav rather than adjusting the navLayoutContext by hand.
    4. Double-click (or use the keyboard shortcut) to open the application.js file in explorer.
    5. Add the following lines of code to the application.js file with the page name and target path that you want to add.
      Note:
      To add pages to L2, include an l2Nav: [{icon, title, action}] array on the L1 page you pass to addNavItem. The page accepts {icon, title, action, l2Nav?, l3Nav?}.
      Action Code to add in application.js
      Add pages to L1 sidebar addNavItem(item, {source?})
      Set (replace) the L3 tab array on any L1 or L2 page by path setL3Nav(targetPath, l3Nav)
      Append tabs to an L1 or L2 page, keeping any tabs already present appendL3Nav(targetPath, l3Nav)
    6. Save the file.
    7. In the Script Runner panel, select Build.
    8. Verify that the added page appears at the expected navigation level using the Quick Preview panel or by deploying to your instance.
      For more information, see the following resources: