Settings Layout

Settings page with side navigation and content area.

Components

Settings Layout

layout

hybrid

<arc-settings-layout>

Overview

SettingsLayout is a two-region layout component designed specifically for settings and preference pages. It pairs a navigation panel (where you place section links like "Profile", "Security", "Billing") with a content area that displays the active settings form. The `nav-position` prop lets you choose between a left sidebar (the classic settings pattern) and a top tab-bar style layout. In `left` mode, the navigation renders as a 220px sidebar with a card-colored background and a right border, creating a clear visual separation from the content. In `top` mode, the navigation appears as a horizontal bar above the content with a bottom border, which works well when there are only a few sections or when horizontal space is at a premium. Both modes use the same slot names, so switching between them requires changing a single attribute. On screens narrower than 768px, the left sidebar layout automatically collapses to a stacked column — the nav moves above the content with a bottom border instead of a right border. This responsive behavior is built in and requires no additional configuration. The component exposes CSS parts for the layout container, nav region, and content region, allowing targeted style overrides when needed.

Guidelines

When to use

Use SettingsLayout for account settings, preferences, and configuration pages
Place a vertical link list or tab group in the nav slot for section switching
Use nav-position="left" when you have more than four or five settings sections
Use nav-position="top" for compact settings pages with only two or three sections
Nest individual settings forms or panels in the default content slot

When not to use

Do not use SettingsLayout for general page layout — use PageLayout for dashboard and content pages
Do not place primary application navigation in the nav slot; it is for settings-section switching only
Do not nest SettingsLayout inside another SettingsLayout or PageLayout with its own sidebar
Do not override the responsive breakpoint without testing the stacked layout on real mobile devices
Do not put heavy interactive content (tables, charts) in the nav slot — keep it lightweight

Features

Two layout modes: left sidebar (220px) and top navigation bar
Card-colored nav background with subtle border separation
Automatic responsive collapse from sidebar to stacked layout at 768px
Named slots: nav (for section links) and default (for content)
CSS Grid layout in left mode, flexbox column in top mode
Exposed CSS parts (layout, nav, content) for targeted ::part() styling
Consistent padding via design tokens (`--space-lg` for nav, `--space-xl` for content)
Border swaps from right to bottom automatically on mobile collapse

Preview

Settings Profile Security Notifications Billing

Profile

Manage your display name, avatar, and contact information.

Display Name

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.

<arc-settings-layout nav-position="left">
  <div slot="nav">Profile | Security</div>
  <div>
    <h2>Profile Settings</h2>
    <p>Manage your account.</p>
  </div>
</arc-settings-layout>

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

export default function Example() {
  return (
    <SettingsLayout nav-position="left">
      <div slot="nav">Profile | Security</div>
      <div>
        <h2>Profile Settings</h2>
        <p>Manage your account.</p>
      </div>
    </SettingsLayout>
  );
}

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

<template>
  <SettingsLayout nav-position="left">
    <div slot="nav">Profile | Security</div>
    <div>
      <h2>Profile Settings</h2>
      <p>Manage your account.</p>
    </div>
  </SettingsLayout>
</template>

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

<SettingsLayout nav-position="left">
  <div slot="nav">Profile | Security</div>
  <div>
    <h2>Profile Settings</h2>
    <p>Manage your account.</p>
  </div>
</SettingsLayout>

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

@Component({
  imports: [SettingsLayout],
  template: `
    <arc-settings-layout nav-position="left">
      <div slot="nav">Profile | Security</div>
      <div>
        <h2>Profile Settings</h2>
        <p>Manage your account.</p>
      </div>
    </arc-settings-layout>
  `,
})
export class MyComponent {}

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

export default function Example() {
  return (
    <SettingsLayout nav-position="left">
      <div slot="nav">Profile | Security</div>
      <div>
        <h2>Profile Settings</h2>
        <p>Manage your account.</p>
      </div>
    </SettingsLayout>
  );
}

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

export default function Example() {
  return (
    <SettingsLayout nav-position="left">
      <div slot="nav">Profile | Security</div>
      <div>
        <h2>Profile Settings</h2>
        <p>Manage your account.</p>
      </div>
    </SettingsLayout>
  );
}

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

   </div>
   <div class="content">
   SettingsLayout
   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-settings-layout — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-settings-layout .settings-layout--left { display: flex;
          flex-direction: column; }
  }
  @media (max-width: 768px) {
    .arc-settings-layout .settings-layout--left .nav { border-right: none;
          border-bottom: 1px solid rgb(24, 24, 30); }
  }
</style>
<div class="arc-settings-layout" style="display: block; box-sizing: border-box">
  <div>
   <div class="nav" style="padding: 24px; background: rgb(13, 13, 18); border-right: 1px solid rgb(24, 24, 30); border-bottom: 1px solid rgb(24, 24, 30)">

   </div>
   <div style="padding: 40px; flex: 1">
   SettingsLayout
   </div>
   </div>
</div>

API

nav-position 'left' | 'top' ='left': Controls whether the navigation panel appears as a left sidebar (220px wide, CSS Grid) or a top bar (full-width, flexbox column). The left layout collapses to stacked on screens narrower than 768px.

Settings Layout

Overview

Guidelines

When to use

When not to use

Features

Preview

Profile

Usage

API

See Also

Docs

Project

Arclight