Layout

Build a page structure from a header, sidebar, body, and footer.

<sy-layout>Installation guide Basic usage

Live preview

Interact with the component to see results here.

SidebarHeader and footer size

Show headerShow footer

View code

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

Usage guide

Build the app's header, sidebar, body, and footer structure. Place each region directly inside Layout.

Header / Footer: size specifies height. Use small, medium, large, or a CSS size.
Sider: size specifies width. Place it after Content to position it on the right.
Content: Fill the remaining content area. Each direct child region is assigned to its slot automatically.

Examples

Header and body

Arrange top and bottom regions without a sidebar.

View code

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

Left navigation area

Place the body after the sidebar to create a left navigation layout.

View code

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

Right supporting area

Place a sidebar after the body for details or supplementary settings.

View code

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Details</div>
  </sy-layout-sider>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

Content-focused layout

Optional headers and footers can be omitted.

View code

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
</sy-layout>

Place regions explicitly

Use the header, content, footer, and left and right sider slots to arrange regions. Assign distinct roles, such as navigation on the left and supporting information on the right.

View code

HTML

<sy-layout style="--layout-min-height:260px">
  <sy-layout-header slot="header">Page title</sy-layout-header>
  <sy-layout-sider slot="sider-start" size="20%">Navigation</sy-layout-sider>
  <sy-layout-content slot="content">Body</sy-layout-content>
  <sy-layout-sider slot="sider-end" size="20%">Supporting information
  </sy-layout-sider>
  <sy-layout-footer slot="footer">Footer</sy-layout-footer>
</sy-layout>

Content and footer

Combine content, a right sidebar and a footer without a header.

View code

HTML

<sy-layout style="--layout-min-height:280px" id="supplement-1">
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">The area containing the
      page's main content.</div>
  </sy-layout-content>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Details</div>
  </sy-layout-sider>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {});
</script>

Feature examples

Choose a feature from 4 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Size

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Methods · None

Use the example's buttons to call methods and inspect their results.

View code

HTML

Loading the example.

Events · None

Interact with the component to see event names and payloads in the live preview below.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-layout>`

Slots

Slot	Description
	Content displayed in the header area.
	Content displayed in the sider-start area.
	Content displayed in the content area.
	Content displayed in the sider-end area.
	Content displayed in the footer area.
	Component body or child items.

`<sy-layout-header>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	Header height: small, medium, large, or a CSS length.

Slots

Slot	Description
	Component body or child items.

`<sy-layout-sider>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	Sidebar width: small, medium, large, or a CSS length.

Slots

Slot	Description
	Component body or child items.

`<sy-layout-content>`

Slots

Slot	Description
	Component body or child items.

`<sy-layout-footer>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	Footer height: small, medium, large, or a CSS length.

Slots

Slot	Description
	Component body or child items.