---
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.

### Styling

The following shadow DOM parts are available for styling:

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

The following state attributes are available for styling:

Attribute      | Description
---------------| -----------
`containment`  | Set to `layout` or `viewport` depending on the containment.
`orientation`  | Set to `horizontal` or `vertical` depending on the orientation.
`has-detail`   | Set when the detail content is provided.
`drawer`       | Set when the layout is using the drawer mode.
`stack`        | Set when the layout is using the stack mode.

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

### containment

**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`.

### detailMinSize

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

Minimum size (in CSS length units) to be set on the detail area.
When specified, it prevents the detail area from shrinking below
this size. If there is not enough space to show master and detail
areas next to each other, the details are shown as an overlay:
either as drawer or stack, depending on the `stackOverlay` property.

### detailSize

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

Fixed size (in CSS length units) to be set on the detail area.
When specified, it prevents the detail area from growing or
shrinking. If there is not enough space to show master and detail
areas next to each other, the details are shown as an overlay:
either as drawer or stack, depending on the `stackOverlay` property.

### forceOverlay

**Type:** `boolean`

When specified, forces the details to be shown as an overlay
(either as drawer or stack), even if there is enough space for
master and detail to be shown next to each other using the default
(split) mode.

In order to enforce the stack mode, use this property together with
`stackOverlay` property and set both to `true`.

### masterMinSize

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

Minimum size (in CSS length units) to be set on the master area.
When specified, it prevents the master area from shrinking below
this size. If there is not enough space to show master and detail
areas next to each other, the details are shown as an overlay:
either as drawer or stack, depending on the `stackOverlay` property.

### masterSize

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

Fixed size (in CSS length units) to be set on the master area.
When specified, it prevents the master area from growing or
shrinking. If there is not enough space to show master and detail
areas next to each other, the details are shown as an overlay:
either as drawer or stack, depending on the `stackOverlay` property.

### 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.

### slotStyles

**Type:** `string[]`



### stackOverlay

**Type:** `boolean`

When true, the layout in the overlay mode is rendered as a stack,
making detail area fully cover the master area. Otherwise, it is
rendered as a drawer and has a visual backdrop.

In order to enforce the stack mode, use this property together with
`forceOverlay` property and set both to `true`.

## Events

### backdrop-click

**Type:** `CustomEvent`

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

### detail-escape-press

**Type:** `CustomEvent`

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