Settings Layout

Components

Settings Layout

layout

hybrid

<arc-settings-layout>

Overview

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

Use SettingsLayout for general page layout -- use PageLayout for dashboard and content pages
Place primary application navigation in the nav slot; it is for settings-section switching only
Nest SettingsLayout inside another SettingsLayout or PageLayout with its own sidebar
Override the responsive breakpoint without testing the stacked layout on real mobile devices
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';

<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: `
    <SettingsLayout nav-position="left">
      <div slot="nav">Profile | Security</div>
      <div>
        <h2>Profile Settings</h2>
        <p>Manage your account.</p>
      </div>
    </SettingsLayout>
  `,
})
export class MyComponent {}

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

<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';

<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">
   Settings Layout
   </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">
   Settings Layout
   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`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.