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


Import the component:

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

Import the TypeScript type:

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';


The layout system is built from the outside in. Each layout component (<mdui-layout-item>) occupies space in one of the four directions (top, bottom, left, right). Subsequent layout components continue to occupy the remaining space.

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

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


Layout Component Order

By default, layout components occupy space in the order they appear in the code. The following examples illustrate this concept, showing different orders for <mdui-top-app-bar> and <mdui-navigation-drawer>.

View this example on a large screen.

When <mdui-top-app-bar> is placed before <mdui-navigation-drawer>, it occupies the full screen width first, leaving only the remaining height for <mdui-navigation-drawer>. If their positions are swapped, <mdui-navigation-drawer> occupies the full screen height first, leaving only the remaining width for <mdui-top-app-bar>.

Layout Component 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> and <mdui-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.

Custom Layout Component 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. The system arranges the components in ascending order of order value. When order values are the same, it arranges them in the order they appear in the code. The default order for all layout components is 0.

mdui-layout-item API


placementplacement'top' | 'bottom' | 'left' | 'right''top'

Determines the component's position. Possible values:

  • top: Positions the component at the top.
  • bottom: Positions the component at the bottom.
  • left: Positions the component on the left.
  • right: Positions the component on the right.

Specifies the layout order within the <mdui-layout> component. Items are sorted in ascending order. The default value is 0.



Can contains any content.

mdui-layout-main API



Can contains any content.

mdui-layout API



Sets the layout height to 100%.



Can contain elements such as <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, and <mdui-layout-main>.

Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
React Vue Angular
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint