Change layout in page
Answered
American Bobtail posted this in #help-forum
American BobtailOP
I have a layout that is generally the same accross all pages, the only difference is that there is a region for buttons that differ per page. Is it possible, without creating a new layout for each page, to get access to a component in the layout and populate it with components that are defined in the pages?
Answered by B33fb0n3
yes, you can use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) to change the content based on a route without recreating the layout over and over again
22 Replies
@American Bobtail I have a layout that is generally the same accross all pages, the only difference is that there is a region for buttons that differ per page. Is it possible, without creating a new layout for each page, to get access to a component in the layout and populate it with components that are defined in the pages?
yes, you can use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) to change the content based on a route without recreating the layout over and over again
Answer
American BobtailOP
I'll have a read, thanks a lot
@American Bobtail I'll have a read, thanks a lot
Can you clarify your issue?
@B33fb0n3 Can you clarify your issue?
American BobtailOP
This is the navbar on my home page and on my properties page
If you see on the right the buttons are contained in a div and vary per page
The rest of the navbar remains identical
It would be convenient if I had access to the div that contains those buttons within each page so that I can populate it with the correct buttons respectively
@American Bobtail It would be convenient if I had access to the div that contains those buttons within each page so that I can populate it with the correct buttons respectively
yes, with parallel routes you can do that. The content that you provide in your props [(blue, purple)](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fparallel-routes.png&w=1920&q=75) is fully customizable by you and also depending on the route you are on
@B33fb0n3 yes, with parallel routes you can do that. The content that you provide in your props [(blue, purple)](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fparallel-routes.png&w=1920&q=75) is fully customizable by you and also depending on the route you are on
American BobtailOP
To clarify the div is in the navbar and the navbar should be in the layout
I haven't finished reading parallel routes yet but I just want to make sure we're on the same page
@American Bobtail To clarify the div is in the navbar and the navbar should be in the layout
yes, you can put the props whereever you want. So also everywhere in your layout. That whats inside your props will be defined in seperate files to match the history and router stuff
American BobtailOP
I finished reading it, I think it solves my problem
Thank you so much
That is incredibly helpful
happy to help
@B33fb0n3 happy to help
American BobtailOP
Im sorry but I'm having an issue with it
I don't seem to get any errors but it simply doesn't render anything
I have created a parallel route "@team" and then have a prop in my layout "team"
Do I need to export the page as team aswell maybe?
American BobtailOP
Nevermind, I've fixed it
Thank you