Fixed Header and Left Navigation in UI Builder

bishalsharm
ServiceNow Employee
We are creating a new portal using UI Builder and want a fixed top header and fixed left-side navigation, similar to the ServiceNow Classic UI where the banner and navigator stay constant and only the right content area changes.
 
We tried building this inside the page body, but faced layout and responsiveness issues.
So we want to understand:
• Is App Shell the recommended place to create a fixed header and navigation?
• Are there best practices to achieve this layout in UI Builder?
• Will implementing this at the App Shell level allow easier future customization?
 
Any guidance would be appreciated.
3 REPLIES 3

Ankith Sharma
Giga Guru

@bishalsharm, I’ve seen similar issues when building this inside the page body usually causes layout and responsiveness issues as the application grows and App Shell is the recommended place to build a fixed top header and left-side navigation in UI Builder. 

Implementing the header and navigation at the App Shell level keeps them fixed across all pages, while only the main content area changes. This also simplifies future customization, since updates to the header or navigation are made in one place and automatically reflected everywhere.

 

From a best-practice perspective, App Shell is designed for global layout elements like headers, navigation, and shared actions. Keeping these elements out of individual pages results in a cleaner structure and a more consistent user experience.

If you find this useful, kindly mark it as Accept as Solution and Helpful.

Regards,
- Ankit

Hi @Ankith Sharma 

 

thanks for your response, if possible do you have any supportive documents or video for reference especially for navigation panel as i tried it but no luck so far

Hi @bishalsharm,

At the moment, I don’t have a specific document or dedicated video reference for the navigation panel. Most of the guidance comes from the UI Builder App Shell and Now Experience documentation and hands-on implementation.

If you can share what issue you’re facing with the navigation, I’ll be happy to help based on experience.

 

If you find this useful, kindly mark it as Accept as Solution and Helpful.

Regards,
- Ankit