Layouts: Rendering routes and other non-document content

A layout is another type of dynamic component, but instead of rendering a document, it renders HTML structures. Layouts can be nested and reused to define the overall structure of your application.

Layouts are used for e.g.:

• Structuring the layout of an entire page.
• Wrapping designs in headers, footers, or navigation elements for full page apps.

For example, an application layout may include:

• A navigation bar at the top.
• A footer at the bottom.
• A dynamic content area in the center, rendered using a common design such as page.

Layouts allow you to define the “shell” of your application while designs handle the rendering of individual documents. They can also be useful when linked to URL routes and inside designs or other layouts as a low-level component without building a full component using a package.

How Layouts Are Found

Contrary to designs layouts are not associated with documents and always referenced by their document id. Therefore the lookup is much simpler than for designs. But it also lacks the flexibility of designs.