Page Layout — ARC UI

Components

Page Layout

layout

hybrid

<arc-page-layout>

Overview

Guidelines

When to use

Use sidebar-left for primary navigation layouts like dashboards and admin panels
Use sidebar-right for contextual detail panels, table-of-contents, or filter drawers
Use centered for article pages, documentation, and content-heavy layouts
Set a meaningful maxWidth when using centered to maintain readable line lengths
Nest PageLayout inside AppShell to combine top bar, sidebar chrome, and page structure
Test the responsive breakpoint to verify sidebar content stacks correctly on mobile
Use the gap property to match the spacing scale defined in your design tokens

When not to use

Nest multiple PageLayouts -- one per page is sufficient; use Container or Section for inner structure
Hard-code column widths with inline styles when the layout prop covers your use case
Place critical navigation in the aside slot -- it is hidden in non-sidebar-right layouts
Forget to provide meaningful content in the sidebar slot when using sidebar-left or sidebar-right
Use wide layout without any internal max-width constraints -- text becomes unreadable at large viewports
Override the responsive breakpoint without testing on real mobile devices

Features

Four layout modes: sidebar-left, sidebar-right, centered, and wide
CSS Grid-based columns with fixed sidebar widths (240px left, 300px right)
Responsive collapse to single-column at 768px breakpoint
Configurable max-width for centered layouts (default 1120px)
Adjustable gap between regions via the gap property
Named slots for sidebar, default (main), and aside regions
CSS custom properties (--max-width, --gap) for runtime tuning
Exposed CSS parts (layout, sidebar, main, aside) for deep styling
Minimum-width protection on the main column to prevent content overflow

Preview

Dashboard

Revenue

$48.2k

Users

1,204

Uptime

99.9%

Chart area

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-page-layout layout="sidebar-left">
  <nav slot="sidebar" style="display: flex; flex-direction: column; gap: 8px;">
    <a href="/dashboard">Dashboard</a>
    <a href="/analytics">Analytics</a>
    <a href="/settings">Settings</a>
  </nav>
  <main>
    <h1>Dashboard</h1>
    <p>Main content area with full-width access.</p>
  </main>
</arc-page-layout>

import { PageLayout } from '@arclux/arc-ui-react';

export function DashboardPage() {
  return (
    <PageLayout layout="sidebar-left">
      <nav slot="sidebar" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <a href="/dashboard">Dashboard</a>
        <a href="/analytics">Analytics</a>
        <a href="/settings">Settings</a>
      </nav>
      <main>
        <h1>Dashboard</h1>
        <p>Main content area with full-width access.</p>
      </main>
    </PageLayout>
  );
}

<script setup>
import { PageLayout } from '@arclux/arc-ui-vue';
</script>

<template>
  <PageLayout layout="sidebar-left">
    <nav slot="sidebar" style="display: flex; flex-direction: column; gap: 8px;">
      <a href="/dashboard">Dashboard</a>
      <a href="/analytics">Analytics</a>
      <a href="/settings">Settings</a>
    </nav>
    <main>
      <h1>Dashboard</h1>
      <p>Main content area with full-width access.</p>
    </main>
  </PageLayout>
</template>

<script>
  import { PageLayout } from '@arclux/arc-ui-svelte';
</script>

<PageLayout layout="sidebar-left">
  <nav slot="sidebar" style="display: flex; flex-direction: column; gap: 8px;">
    <a href="/dashboard">Dashboard</a>
    <a href="/analytics">Analytics</a>
    <a href="/settings">Settings</a>
  </nav>
  <main>
    <h1>Dashboard</h1>
    <p>Main content area with full-width access.</p>
  </main>
</PageLayout>

import { Component } from '@angular/core';
import { PageLayout } from '@arclux/arc-ui-angular';

@Component({
  imports: [PageLayout],
  template: `
    <PageLayout layout="sidebar-left">
      <nav slot="sidebar" style="display: flex; flex-direction: column; gap: 8px;">
        <a href="/dashboard">Dashboard</a>
        <a href="/analytics">Analytics</a>
        <a href="/settings">Settings</a>
      </nav>
      <main>
        <h1>Dashboard</h1>
        <p>Main content area with full-width access.</p>
      </main>
    </PageLayout>
  `,
})
export class DashboardPageComponent {}

import { PageLayout } from '@arclux/arc-ui-solid';

export function DashboardPage() {
  return (
    <PageLayout layout="sidebar-left">
      <nav slot="sidebar" style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
        <a href="/dashboard">Dashboard</a>
        <a href="/analytics">Analytics</a>
        <a href="/settings">Settings</a>
      </nav>
      <main>
        <h1>Dashboard</h1>
        <p>Main content area with full-width access.</p>
      </main>
    </PageLayout>
  );
}

import { PageLayout } from '@arclux/arc-ui-preact';

export function DashboardPage() {
  return (
    <PageLayout layout="sidebar-left">
      <nav slot="sidebar" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <a href="/dashboard">Dashboard</a>
        <a href="/analytics">Analytics</a>
        <a href="/settings">Settings</a>
      </nav>
      <main>
        <h1>Dashboard</h1>
        <p>Main content area with full-width access.</p>
      </main>
    </PageLayout>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-page-layout — requires page-layout.css + base.css (or arc-ui.css) -->
<div class="arc-page-layout">
  <div class="page-layout">
   <div class="sidebar">

   </div>
   <div class="main">
   Page Layout
   </div>
   <div class="aside">

   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-page-layout — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-page-layout([layout='sidebar-left']) .page-layout,
        .arc-page-layout([layout='sidebar-right']) .page-layout { grid-template-columns: 1fr; }
  }
</style>
<div class="arc-page-layout" style="display: block; box-sizing: border-box">
  <div class="page-layout" style="padding: 40px 24px; gap: var(--gap); min-height: 100%; box-sizing: border-box">
   <div style="display: none">

   </div>
   <div style="min-width: 0">
   Page Layout
   </div>
   <div style="display: none">

   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`layout`	`'sidebar-left' \| 'sidebar-right' \| 'centered' \| 'wide'`	`'centered'`	Controls the column structure of the page. sidebar-left creates a 240px fixed column on the left for navigation. sidebar-right creates a 300px fixed column on the right for contextual content. centered constrains the main area to max-width with auto margins. wide allows content to stretch the full available width.
`max-width`	`string`	`'1120px'`	Maximum width of the content area when using the centered layout. Accepts any valid CSS length value. Has no effect on sidebar-left, sidebar-right, or wide layouts. Maps to the --max-width CSS custom property.
`gap`	`string`	`'var(--space-xl)'`	Gap between the sidebar/aside and main content regions. Accepts any valid CSS length or spacing token. Maps to the --gap CSS custom property and applies to the CSS Grid gap in sidebar layouts.