# Nested layouts

A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render.

### Demo

1. Try navigating between categories and sub categories above.
2. Notice layouts do not re-render (visualized as the a pink border animating to gray) when navigating across sibling routes.
3. Notice client state (visualized as a click counter) is preserved between navigations.
4. Notice you can interact (e.g. click the counter) with the layout while a sibling route is loading.

### Links

- [Docs](https://nextjs.org/docs/app/getting-started/layouts-and-pages)
- [Code](https://github.com/vercel/next-app-router-playground/tree/main/app/layouts)
