Replicating Classic UI Behavior in UI Builder for a Custom Portal

[bishalsharm]

Hello Members,

I am researching how to design a UI Builder layout that behaves similar to the ServiceNow Classic UI for a new custom portal I am building using UI Builder.

The requirement is to have:

• A fixed header (banner) at the top

• A fixed vertical left navigation panel (similar to the Filter Navigator)

• A main content area where the HTML/body content changes based on the selection made in the left navigation

• No page reload, only the content area should update

Essentially, I’m trying to replicate the Classic UI pattern of banner + filter navigator + content frame, but using UI Builder best practices (components, state, etc.).

What is the recommended architectural approach in UI Builder to achieve this?

Looking forward to hearing how others have implemented similar layouts in UI Builder.

Best Regards,

Bishal Sharma

[MaxMixali]

High-Level Structure

Use a single-page application (SPA) pattern with a master page containing three main components:
1- Header Component (fixed position)
2- Navigation Component (fixed left sidebar)
3- Dynamic Content Component (main area that updates based on navigation)

[bishalsharm]

@MaxMixali thanks for your response, do you have any supportive document or article to follow ?

[MaxMixali]

you can look for on the documentation

[bishalsharm]

I do see the documents but they are mainly for Service Portal not UI Builder. My aim is to replicate the Classic UI Behavior via UI Builder for a custom portal.