Reuse navigation, footers and layouts across pages
How do you avoid rebuilding navigation and footers on every page?
Design the shared structure once as a linked layout and place a children placeholder where page-specific content belongs. Pair that with reusable components and variants for the smaller repeated pieces. Every page that uses the layout inherits changes to it, so a navigation edit happens in one place rather than on every page.
Key points
- A linked layout holds shared structure; a children placeholder marks where each page differs.
- Components with variants cover repeated pieces that need small differences.
- Layouts and components live in the Assets panel alongside the rest of the document.
- Changing the layout changes every page that links to it.
Layouts versus components
| Use a linked layout when | Use a component when |
|---|---|
| The structure wraps a whole page — navigation, footer, page chrome. | The piece repeats inside pages — a card, a button, a marquee row. |
| Each page needs to drop its own content into the middle. | Each instance needs the same design with small variations. |
The children placeholder
A layout without a children placeholder is just a page. The placeholder is what makes the layout reusable: it marks the slot every linked page fills with its own content, while the navigation and footer around it stay owned by the layout.
- Design the shared navigation and footer once.
- Insert a children placeholder between them.
- Link each page to the layout and design only what differs.
Keeping expression consistent
Shared structure does not have to mean uniform pages. Shader colors, icon sets from Tabler, Lucide and Remix, text hover effects and entrance or scroll-based motion are all editable per element, so pages can stay distinct while their skeleton stays shared.
Frequently asked questions
Can I reuse navigation and footer designs across pages?
Yes. Use reusable components and linked layouts for shared structure. Layouts can include a children placeholder for page-specific content, so you do not need to rebuild navigation and footers for every page.
Does editing a layout update every page that uses it?
Linked layouts exist so shared structure is edited once. Pages linked to the layout inherit its structure, while their own content stays in the children slot.
