Layout

Switch between the four common page frames: stacked, a Sider before or after the content, and a Sider running the full height.

Stack Layout.Header, Layout.Content and Layout.Footer for the simplest page, with a dark menu in the header and a breadcrumb above the content.

Put a Layout.Sider directly inside the outer Layout to place it beside an inner Layout holding the header, content and footer.

A top menu over a content area that holds its own Layout.Sider, so the side menu only spans the content, like a documentation site.

A top menu over an inner Layout whose Layout.Sider runs the full height beside the breadcrumb and content, like a product dashboard.

Set collapsible on the Sider and control collapsed with onCollapse to add a bar that folds it down to the menu icons.

Pass trigger={null} to drop the built-in collapse bar, and toggle collapsed from a button of your own in the header.

Position the Sider over the content so it opens on top instead of pushing the page aside, with a menu icon as its trigger.

Set collapsedWidth={0} to hide the Sider completely when collapsed, leaving a small tab on the edge that opens it again.

Set breakpoint="md" to collapse the Sider on narrow screens, and pair it with collapsedWidth={0} so it hides behind a tab.

Make the header sticky at the top of a scrolling layout, so the menu stays in view while the content scrolls under it.

Make the Sider sticky and as tall as the screen, so the side menu stays in place while the content beside it scrolls.

An admin app frame with a collapsible dark Sider, a header with a breadcrumb, alerts and a user menu, and a row of stat cards.