UI Builder Components List Menu says to use sn-now-list-menu bundle

[J A Lindsay]

I have a requirement to build a workspace that is also mobile-friendly, so I'm unable to use the OOTB templates provided by ServiceNow. As such, I'm rebuilding some of the pages from scratch to make them mobile-friendly.

One of the ones I'm having difficulty with is the List page. The templated version is using List menu, and it works beautifully. But when I attempt to add a List menu component to my page, it doesn't interact with the Record list at all. It doesn't matter what I click, nothing updates on the Record list. Additionally, when I hover over the informational i in the corner, it says to use the sn-now-list-menu bundle instead, however I can't access this.

The biggest drawback with the list that I'm able to use seems to be that the Data section of the component isn't available, so I can't set tab items or menu items or anything.

In the screenshots, the one labelled Menu 1, ID: list_menu_1 is the templated version that works beautifully. The one labelled List Menu 2, ID: list_menu_2 is the one that doesn't interact with the Record list at all and does not have the Data section available to be configured, nor can I add a Preset.

[aneta_koleva]

most probably the versions of the list menu used in the template and the list menu you are using as a component are different that's why you see different properties on the Config section. I believe you need to create a "Configuration":

in order to make your list menu work

[Ravi Gaurav]

Hi @J A Lindsay 

• sn-now-list-menu bundle

  • The version of the List Menu you see in OOTB pages isn’t just the raw UI Builder component.

  • It’s wrapped in the sn-now-list-menu bundle, which ties the menu to the Record List and exposes the Data panel for presets and tab configuration.

  • The raw component you drag doesn’t include that wiring, so it shows up but doesn’t control the list.

• Bindings

  • In OOTB pages, the sn-now-list-menu is bound to the record list’s data source and routing context.

  • If you pull the List Menu from the library, those bindings aren’t preconfigured, so it appears “dead.”

• Mobile-friendly rebuild

  • Since you’re building from scratch, you don’t get the OOTB wiring unless you replicate it manually or use the bundle.

You have 3 options:

1. Copy from OOTB Template (Recommended)

• Open the OOTB List page template.

• Copy the whole List Menu component (bundle) into your page.

• This ensures you get the sn-now-list-menu binding logic.

• Once copied, you can adjust the styling for mobile.

2. Use the sn-now-list-menu Bundle Directly

• In some releases, the sn-now-list-menu bundle isn’t directly visible in the component picker.

• But you can:

  • Click the “Convert to bundle” on the raw List Menu, then link it to the Record List.

  • Or manually add it via Experience Bundles if your instance allows (depends on version).

3. Wire Up Manually

If you must use the plain List Menu:

• Go into Props → Data resource.

• Bind it to the same data resource as your Record List (e.g., task table with filter).

• Ensure the Contextual filters (route/page params) are shared between List Menu and Record List.

• Manually define tab items under items.

This recreates what the bundle does OOTB.

[J A Lindsay · Accepted solution]

Okay, so I have the solution, actually it was annoyingly simple. 

Firstly to anyone at SN the following component is inaccessible "sn-now-list-menu" So I considered using it as suggested on your Record List component, and then disregarded using it in favour of the List Menu, that will not have any new features added to it. 

However the list menu can be picked. 

This is how to get the two components to talk to each other using UI Builder 28.1.57

Add your components as shown above. 
Then select the List Menu, in the right hand pane, go to events. 
Delete the one there. 
Create a new one.  Menu Item Clicked > Menu tab selected > In the selected tab Id use the coin symbol to dot walk to: list_menu_1.selectedListId
Apply and save. 
Then selecting Presentational List.
Under Types and Layouts. 
Select the dropdown "Type" and change it to simple, then do it again and pick "With Menu"
Layouts are List Only. 

I did have some issue accessing this, if it is not working for you, try changing it on the bottom left under Data and Scripts. Data Resources, List Controller, and make the same change there. 
I also, set the field Selected list ID here as well to "list_menu_1.selectedListId(null)"

Then went back to the presentational List and was able to make exactly the same changes there. 
Save it and preview. 

It now works. 🙂

Please bear in mind that UI builder updates regularly, so hopefully, this post will be obsolete soon!