# Layout Component

Layout components provide a flexible system for page-level layout.

<style>
.example-top-app-bar {
  background-color: rgb(var(--mdui-color-surface-container));
}

.example-navigation-drawer::part(panel) {
  background-color: rgb(var(--mdui-color-surface-container-low));
}

.example-layout-item {
  background-color: rgb(var(--mdui-color-surface-container-low));
}

.example-layout-main {
  background-color: rgb(var(--mdui-color-surface-container-lowest));
}

@media (min-width: 840px) {
  .example-md-visible {
    display: none;
  }
}
</style>

## Usage {#usage}

Import the component:

```js
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
```

Import the TypeScript type:

```ts
import type { Layout } from 'mdui/components/layout.js';
import type { LayoutItem } from 'mdui/components/layout-item.js';
import type { LayoutMain } from 'mdui/components/layout-main.js';
```

**Introduction:**

The layout system is designed to be built from the outside in. Each layout component (`<mdui-layout-item>`) occupies space on one of the four sides (top, bottom, left, right). Subsequent layout components fill the remaining space.

The following components inherit from `<mdui-layout-item>` and can also be used as layout components:

- [`<mdui-navigation-bar>`](/en/docs/2/components/navigation-bar)
- [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer)
- [`<mdui-navigation-rail>`](/en/docs/2/components/navigation-rail)
- [`<mdui-bottom-app-bar>`](/en/docs/2/components/bottom-app-bar)
- [`<mdui-top-app-bar>`](/en/docs/2/components/top-app-bar)

The `<mdui-layout-main>` component occupies the remaining space, where you can place page content.

## Examples {#examples}

### Layout Component Order {#layout-default-order}

By default, layout components take up space in the order they appear in the code. The following examples show how order affects [`<mdui-top-app-bar>`](/en/docs/2/components/top-app-bar) and [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer).

<p class="example-md-visible">View this example on a large screen.</p>

```html
<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigation drawer</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>
```

```html
<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigation drawer</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>
```

When [`<mdui-top-app-bar>`](/en/docs/2/components/top-app-bar) appears before [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer), it takes the full screen width, leaving only the remaining height for `<mdui-navigation-drawer>`. If you swap the order, [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer) takes the full screen height first, leaving only the remaining width for [`<mdui-top-app-bar>`](/en/docs/2/components/top-app-bar).

### Layout Component Placement {#example-placement}

Use the `placement` attribute to specify the position (top, bottom, left, or right) of the `<mdui-layout-item>` component in the layout. For [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer) and [`<mdui-navigation-rail>`](/en/docs/2/components/navigation-rail), the `placement` attribute specifies their left or right position.

In the following example, two `<mdui-layout-item>` components are placed on both sides of the application.

```html
<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>
```

### Custom Layout Component Order {#example-order}

In most cases, the order of layout components in the code will achieve the desired layout.

However, you can use the `order` attribute to specify the layout order. Layout components are ordered by ascending `order` value. When `order` values are the same, source order is used. The default `order` for all layout components is `0`.

```html
<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-checkbox>order="-1"</mdui-checkbox>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>

<script>
  const topAppBar = document.querySelector(".example-order mdui-top-app-bar");
  const checkbox = document.querySelector(".example-order mdui-checkbox");

  checkbox.addEventListener("change", (event) => {
    topAppBar.order = event.target.checked ? -1 : 0;
  });
</script>
```

## mdui-layout-item API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>placement</td>
    <td>placement</td>
    <td>true</td>
    <td>&#39;top&#39; | &#39;bottom&#39; | &#39;left&#39; | &#39;right&#39;</td>
    <td>'top'</td>
    <td><p>Determines where the component is placed. Possible values:</p>
<ul>
<li><code>top</code>: Places the component at the top.</li>
<li><code>bottom</code>: Places the component at the bottom.</li>
<li><code>left</code>: Places the component on the left.</li>
<li><code>right</code>: Places the component on the right.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>order</td>
    <td>order</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>Specifies the layout order within the <a href="/en/docs/2/components/layout"><code>&lt;mdui-layout&gt;</code></a> component. Items are sorted in ascending order. The default value is <code>0</code>.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Can contain any content.</p>
</td>
  </tr>
</tbody>
</table>

## mdui-layout-main API

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Can contain any content.</p>
</td>
  </tr>
</tbody>
</table>

## mdui-layout API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>full-height</td>
    <td>fullHeight</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Sets the layout height to 100%.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Can contain elements such as <a href="/en/docs/2/components/top-app-bar"><code>&lt;mdui-top-app-bar&gt;</code></a>, <a href="/en/docs/2/components/bottom-app-bar"><code>&lt;mdui-bottom-app-bar&gt;</code></a>, <a href="/en/docs/2/components/navigation-bar"><code>&lt;mdui-navigation-bar&gt;</code></a>, <a href="/en/docs/2/components/navigation-drawer"><code>&lt;mdui-navigation-drawer&gt;</code></a>, <a href="/en/docs/2/components/navigation-rail"><code>&lt;mdui-navigation-rail&gt;</code></a>, <code>&lt;mdui-layout-item&gt;</code>, and <code>&lt;mdui-layout-main&gt;</code>.</p>
</td>
  </tr>
</tbody>
</table>