Notebook
UI Builder: Add Header Menu
Purpose: How to add a header menu to a Portal Experience in ServiceNow UI Builder. The header menu is displayed at the top of every page in a Portal Experience.
- Open Experience in UI Builder
- Click “Menu”
- Click “Edit Experience Settings”
- Click “Navigation and Menus”
- Click “Advanced Footer Settings”
- Note: Currently the Advanced Navigation Menu Settings link is broken
- Complete UX Page Property form as follows:
- Page: current Portal Experience name
- Name: chrome_menu
- Route: leave blank
- Description: any text
- Value:
[ { "value": { "label": { "translatable": true, "message": "Knowedge" } }, "children": { "action": { "label": { "translatable": true, "message": "Report an issue" }, "type": "route", "rightIcon": "chevron-right-fill", "value": { "route": "catalog", "fields": { "sysId": "3f1dd0320a0a0b99000a53f7604a2ef9" } } }, "items": [ { "value": { "label": { "translatable": true, "message": "Categories" } }, "children": { "action": { "label": { "translatable": true, "message": "Browse All" }, "type": "route", "rightIcon": "chevron-right-fill", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } }, "items": [ { "value": { "label": { "translatable": true, "message": "IT" }, "type": "route", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } } }, { "value": { "label": { "translatable": true, "message": "Benefits" }, "type": "route", "value": { "route": "article", "fields": { "sysId": "3020c9b1474321009db4b5b08b9a712d" } } } } ] } } ] } } ]
- Click Submit
- Close the current browser tab to return to the UI Builder browser tab
- Close portal settings
- Click “Open” to test page
Special thanks to Ninja Bytes