Page Layout
Examples
Collapsible navigation
With context column/drawer
Without Navigation/Aside
Importing
Slots
Properties
Events
Parts
Dependencies

Page Layout

<sl-page-layout> | SlPageLayout

Since 2.34.0

experimental

Use this for layouting a whole page in a main section, header section and optionally an aside-section on the left and/or a responsive context column to the right.

My Card Content with some more text in the top-slot

Undo

Redo

Actions Copy

Paste

Delete

+1 (234) 456–7890

The main page content goes here in the main slot.

<sl-page-layout class="preview">
  <sl-page-header slot="header">
    <div slot="center">
      <sl-icon
        name="mdi:play-circle"
        width="25"
      ></sl-icon>
      <sl-icon
        name="mdi:pause-circle"
        width="25"
      ></sl-icon>
    </div>
    <div slot="right">
      <sl-button
        circle
      >
        <sl-icon icon="mdi:account"></sl-icon>
      </sl-button>
    </div>
  </sl-page-header>
  <sl-page-aside slot="aside">
    <sl-card
      slot="top"
      headline="Card Headline"
    >
      <p>My Card Content with some more text in the top-slot</p>
    </sl-card>
    <sl-tree slot="center">
			<sl-tree-item value="undo">Undo</sl-tree-item>
			<sl-tree-item value="redo">Redo</sl-tree-item>
			<sl-tree-item expanded>Actions
      	<sl-tree-item value="copy">Copy</sl-tree-item>
      	<sl-tree-item value="paste">Paste</sl-tree-item>
      	<sl-tree-item value="delete">Delete</sl-tree-item>
			</sl-tree-item>
    </sl-tree>
    <div slot="bottom">
      <span id="my-phone">+1 (234) 456-7890</span>
      <sl-copy-button from="my-phone"></sl-copy-button>
    </div>
  </sl-page-aside>
  <sl-page-content slot="main">
    <p>The main page content goes here in the main slot.</p>
  </sl-page-content>
</sl-page-layout>

Examples

To show a collapse icon and add the functionality to toggle the aside-slot apply a property called collapsible.

My Card Content with some more text in the top-slot

Undo

Redo

Actions Copy

Paste

Delete

+1 (234) 456–7890

Head row - Col 1

Head row - Col 2

Row 2 - Col 1

Row 2 - Col 2

Row 3 - Col 1

Row 3 - Col 2

Row 4 - Col 1

Row 4 - Col 2

<div class="container">
	<sl-page-layout collapsible class="preview">
		<sl-page-header slot="header">
			<div slot="center">
				<sl-icon
					name="mdi:play-circle"
					width="25"
				></sl-icon>
				<sl-icon
					name="mdi:pause-circle"
					width="25"
				></sl-icon>
			</div>
			<div slot="right">
				<sl-button
					circle
				>
					<sl-icon icon="mdi:account"></sl-icon>
				</sl-button>
			</div>
		</sl-page-header>
		<sl-page-aside slot="aside">
			<sl-card
				slot="top"
				headline="Card Headline"
			>
				<p>My Card Content with some more text in the top-slot</p>
			</sl-card>
			<sl-tree slot="center" variant="navigation">
				<sl-tree-item value="undo">
					<sl-icon name="mdi-puzzle"></sl-icon>Undo
				</sl-tree-item>
				<sl-tree-item value="redo">
					<sl-icon name="mdi-puzzle"></sl-icon>Redo
				</sl-tree-item>
				<sl-tree-item expanded>
					<sl-icon name="mdi-puzzle"></sl-icon>Actions
					<sl-tree-item value="copy"><sl-icon name="mdi-puzzle"></sl-icon>Copy</sl-tree-item>
					<sl-tree-item value="paste"><sl-icon name="mdi-puzzle"></sl-icon>Paste</sl-tree-item>
					<sl-tree-item value="delete"><sl-icon name="mdi-puzzle"></sl-icon>Delete</sl-tree-item>
				</sl-tree-item>
			</sl-tree>
			<div slot="bottom">
				<span id="my-phone">+1 (234) 456-7890</span>
				<sl-copy-button from="my-phone"></sl-copy-button>
			</div>
		</sl-page-aside>
		<sl-page-content slot="main">
			<div style="height: 200px; overflow:auto">
				<sl-table stickyHead>
					<sl-table-row slot="head">
						<sl-table-cell>Head row - Col 1</sl-table-cell>
						<sl-table-cell>Head row - Col 2</sl-table-cell>
					</sl-table-row>
					<sl-table-row>
						<sl-table-cell>Row 2 - Col 1</sl-table-cell>
						<sl-table-cell>Row 2 - Col 2</sl-table-cell>
					</sl-table-row>
					<sl-table-row>
						<sl-table-cell>Row 3 - Col 1</sl-table-cell>
						<sl-table-cell>Row 3 - Col 2</sl-table-cell>
					</sl-table-row>
					<sl-table-row>
						<sl-table-cell>Row 4 - Col 1</sl-table-cell>
						<sl-table-cell>Row 4 - Col 2</sl-table-cell>
					</sl-table-row>
				</sl-table>
			</div>
		</sl-page-content>
	</sl-page-layout>
</div>
<script>
  const container = document.querySelector('.container');
	container.addEventListener('sl-toggle-navigation', event => {
    console.log(event.detail);
  });
</script>

With context column/drawer

To build up a layout with a responsive context column just add content to the context-slot.

My Card Content with some more text in the top-slot

Undo

Redo

Actions Copy

Paste

Delete

+1 (234) 456–7890

The main page content goes here in the main slot.

To show some context add it here to the context-slot.

<sl-page-layout class="preview">
  <sl-page-header slot="header">
    <div slot="center">
      <sl-icon
        name="mdi:play-circle"
        width="25"
      ></sl-icon>
      <sl-icon
        name="mdi:pause-circle"
        width="25"
      ></sl-icon>
    </div>
    <div slot="right">
      <sl-button
        circle
      >
        <sl-icon icon="mdi:account"></sl-icon>
      </sl-button>
    </div>
  </sl-page-header>
  <sl-page-aside slot="aside">
    <sl-card
      slot="top"
      headline="Card Headline"
    >
      <p>My Card Content with some more text in the top-slot</p>
    </sl-card>
    <sl-tree slot="center">
			<sl-tree-item value="undo">Undo</sl-tree-item>
			<sl-tree-item value="redo">Redo</sl-tree-item>
			<sl-tree-item expanded>Actions
      	<sl-tree-item value="copy">Copy</sl-tree-item>
      	<sl-tree-item value="paste">Paste</sl-tree-item>
      	<sl-tree-item value="delete">Delete</sl-tree-item>
			</sl-tree-item>
    </sl-tree>
    <div slot="bottom">
      <span id="my-phone">+1 (234) 456-7890</span>
      <sl-copy-button from="my-phone"></sl-copy-button>
    </div>
  </sl-page-aside>
  <sl-page-content slot="main" contextButtonText="show">
    <p>The main page content goes here in the main slot.</p>
    <div slot="context"><p>To show some context add it here to the context-slot.</p></div>
  </sl-page-content>
</sl-page-layout>

Without Navigation/Aside

To build a layout without any left column, just don’t fill the slot named “aside”.

Head row - Col 1

Head row - Col 2

Row 2 - Col 1

Row 2 - Col 2

Row 3 - Col 1

Row 3 - Col 2

Row 4 - Col 1

Row 4 - Col 2

<sl-page-layout collapsible class="preview">
  <sl-page-header slot="header">
    <div slot="center">
      <sl-icon
        name="mdi:play-circle"
        width="25"
      ></sl-icon>
      <sl-icon
        name="mdi:pause-circle"
        width="25"
      ></sl-icon>
    </div>
    <div slot="right">
      <sl-button
        circle
      >
        <sl-icon icon="mdi:account"></sl-icon>
      </sl-button>
    </div>
  </sl-page-header>
  <sl-page-content slot="main">
		<div style="height: 200px; overflow:auto">
			<sl-table stickyHead>
				<sl-table-row slot="head">
					<sl-table-cell>Head row - Col 1</sl-table-cell>
					<sl-table-cell>Head row - Col 2</sl-table-cell>
				</sl-table-row>
				<sl-table-row>
					<sl-table-cell>Row 2 - Col 1</sl-table-cell>
					<sl-table-cell>Row 2 - Col 2</sl-table-cell>
				</sl-table-row>
				<sl-table-row>
					<sl-table-cell>Row 3 - Col 1</sl-table-cell>
					<sl-table-cell>Row 3 - Col 2</sl-table-cell>
				</sl-table-row>
				<sl-table-row>
					<sl-table-cell>Row 4 - Col 1</sl-table-cell>
					<sl-table-cell>Row 4 - Col 2</sl-table-cell>
				</sl-table-row>
			</sl-table>
		</div>
  </sl-page-content>
</sl-page-layout>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v2-48-10.yoummday-theme.pages.dev/components/page-layout/page-layout.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v2-48-10.yoummday-theme.pages.dev/components/page-layout/page-layout.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/page-layout/page-layout.js';

To import this component as a React component:

import SlPageLayout from '@yoummday/ymmd-shoelace/dist/react/page-layout';

Slots

Name	Description
`header`	The header slot.
`aside`	The aside slot.
`main`	The main slot.
`aside-header`	The header that is shown above the aside slot on mobiles.

Learn more about using slots.

Properties

Name	Description	Type	Default
`collapsible`	Shows the collapse icon. Enabling this will make the aside-element collapsible.	`boolean`	`false`
`isNavigationCollapsed`	Internal property. Reflects the collapsed state of the aside element as an attribute (if enabled)	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`sl-toggle-navigation`	`onSlToggleNavigation`	Emitted when the aside element is either collapsed or expanded.	`{ collapsed: boolean }`

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.
`header`	The component’s header wrapper.
`core`	The component’s core wrapper.
`main`	The component’s main wrapper.
`content-box`	The component’s content box wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>

Examples

Collapsible navigation

With context column/drawer

Without Navigation/Aside

Importing

Slots

Properties

Events

Parts

Dependencies