---
title: MasterDetailLayout
description: MasterDetailLayout
element: vaadin-master-detail-layout
---

## Description

`<vaadin-master-detail-layout>` is a web component for building UIs with a master
(or primary) area and a detail (or secondary) area that is displayed next to, or
overlaid on top of, the master area, depending on configuration and viewport size.

### Slots

The component has two main content areas: the master area (default slot)
and the detail area (`detail` slot). When the detail doesn't fit next to
the master, it is shown as an overlay on top of the master area:

```html
<vaadin-master-detail-layout>
  <div>Master content</div>
  <div slot="detail">Detail content</div>
</vaadin-master-detail-layout>
```

The component also supports a `detail-placeholder` slot for content shown
in the detail area when no detail is selected. Unlike the `detail` slot,
the placeholder is simply hidden when it doesn't fit next to the master area,
rather than shown as an overlay:

```html
<vaadin-master-detail-layout>
  <div>Master content</div>
  <div slot="detail-placeholder">Select an item</div>
</vaadin-master-detail-layout>
```

### Styling

The following shadow DOM parts are available for styling:

Part name             | Description
----------------------|----------------------
`backdrop`            | Backdrop covering the master area in the overlay mode
`master`              | The master area
`detail`              | The detail area
`detail-placeholder`  | The detail placeholder area

The following state attributes are available for styling:

Attribute                 | Description
--------------------------|----------------------
`expand`                  | Set to `master`, `detail`, or `both`.
`orientation`             | Set to `horizontal` or `vertical` depending on the orientation.
`has-detail`              | Set when the detail content is provided and visible.
`has-detail-placeholder`  | Set when the detail placeholder content is provided.
`overlay`                 | Set when columns don't fit and the detail is shown as an overlay.
`overlay-containment`     | Set to `layout` or `viewport`.

The following custom CSS properties are available for styling:

Custom CSS property                                  |
:----------------------------------------------------|
| `--vaadin-master-detail-layout-border-color`       |
| `--vaadin-master-detail-layout-border-width`       |
| `--vaadin-master-detail-layout-detail-background`  |
| `--vaadin-master-detail-layout-detail-shadow`      |
| `--vaadin-overlay-backdrop-background`             |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### detailSize

**Type:** `string | null | undefined`

Size (in CSS length units) to be set on the detail area in
the CSS grid layout. If there is not enough space to show
master and detail areas next to each other, the detail area
is shown as an overlay. Defaults to 15em.

### expand

**Type:** `"master" | "detail" | "both"`

Controls which column(s) expand to fill available space.
Possible values: `'master'`, `'detail'`, `'both'`.
Defaults to `'master'`.

### masterSize

**Type:** `string | null | undefined`

Size (in CSS length units) to be set on the master area in
the CSS grid layout. If there is not enough space to show
master and detail areas next to each other, the detail area
is shown as an overlay. Defaults to 30em.

### noAnimation

**Type:** `boolean`

When true, the layout does not use animated transitions for the detail area.

### orientation

**Type:** `"horizontal" | "vertical"`

Define how master and detail areas are shown next to each other,
and the way how size and min-size properties are applied to them.
Possible values are: `horizontal` or `vertical`.
Defaults to horizontal.

### overlayContainment

**Type:** `"layout" | "viewport"`

Defines the containment of the detail area when the layout is in
overlay mode. When set to `layout`, the overlay is confined to the
layout. When set to `viewport`, the overlay is confined to the
browser's viewport. Defaults to `layout`.

### overlaySize

**Type:** `string | null | undefined`

Size (in CSS length units) for the detail area when shown as an
overlay. When not set, falls back to `detailSize`. Set to `100%`
to make the detail cover the full layout.

## Events

### backdrop-click

**Type:** `CustomEvent`

backdrop-click
Fired when the user clicks the backdrop in the overlay mode.

### detail-escape-press

**Type:** `CustomEvent`

detail-escape-press
Fired when the user presses Escape in the detail area.