In MVC, composite container like Tabs component has defined layout on each tab item and it processes on partial pages.

In XM Cloud / Headless solution, I am able to create a separate layout on my tab items but I am getting a hard time making it work in the parent tab component.

I am thinking if a graphQL can be an option but wanting to ask the community if you have any inputs how to create composite containers.

Thanks in advance for your inputs.

  • Your questions is not clear, If you want to create a tab component, in a headless you your DataSource created in such a manner that it can cover everything, and your JSS component should be designed using this DataSource, not sure where layout came into picture in your case? or am i understanding it incorrectly? Mar 28 at 5:55

1 Answer 1


If you want to achieve something like the image, where there is a Tabs container, you need to create 2 components, the first one is the container with a placeholder that can receive many components (children), and the second one will be the Tab component. The key here is to iterate all the children in the placeholder and get the data you need to render the left part (tabs) and the right side (content). You can do it by getting the rendering placeholder data from the props of your container component like this:

props.rendering.placeholders && props.rendering.placeholders['placeholderName']?.map( //do something) 

enter image description here

You can get a better understanding on how to work with placeholders in XM Cloud here: https://sitecoretek.wordpress.com/2023/07/31/xm-cloud-working-with-placeholders-in-sitecore-pages-end-to-end-guide/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.