> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hana.leafphp.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Layouts

> Wrap a structure or state around your page

Layouts allow you create a structure that is applied to a set of routes, for instance you can have a dashboard layout that is applied to all your dashboard routes. Layouts allow you write components like your headers, footers and sidebars once and apply them wherever necessary

## **Creating a Layout**

Hana automatically detects your layout component by looking for a `_layout.tsx` file in the `pages` directory. The `_layout.tsx` file should export a React component that will be rendered while a page is being fetched.

```tsx src/pages/_layout.tsx theme={"theme":"ayu-dark"}
const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <div>
      <header>Header</header>
      <main>
        <div>{children}</div>
      </main>
      <footer>Footer</footer>
    </div>
  );
};

export default Layout;
```

## **Scoped Layout Components**

Hana allows you to have multiple `_layout.tsx` files. For example, you can have a `_layout.tsx` file in the `pages/users` directory that will be used for all pages in the `/users` directory.

```
|- pages
  |- index.tsx
  |- _layout.tsx
  |- users
    |- _layout.tsx
```

Considering the directory structure above, the `_layout.tsx` file in the `pages/users` directory will be used for all pages in the `/users` directory. The `_layout.tsx` file in the `pages` directory will be used for all other pages.

## Loading Layouts

You can also create layouts that show up only a page is being loaded by adding a `_loading` file. This uses React's [**Suspense**](https://react.dev/reference/react/Suspense) API under the hood, so you can use it with any asynchronous data fetching library.

```tsx src/pages/_loading.tsx theme={"theme":"ayu-dark"}
const Loading: React.FC = () => {
  return <div>Loading...</div>;
};

export default Loading;
```

And just like with `_layout` files, your loading layout files can also be scoped to particular folders, and you can have as many as you need in your application

```
|- pages
  |- index.tsx
  |- _loading.tsx
  |- users
    |- _loading.tsx
```