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 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, which separates it from the content. In `top` mode, the navigation appears as a horizontal bar above the content with a bottom border, which suits a few sections or tight horizontal space. 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 needs no configuration. The component exposes CSS parts for the layout container, nav region, and content region.

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

`arc-settings-nav-item` links with an active state that follows the URL hash, so a shared link or the back button lands on the right section
`sections` shows only the section whose `id` matches the active item, for a tabbed settings page
On a phone the nav becomes a scrolling row of tabs above the content, instead of a stack that pushes it down
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

Profile

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

navPosition'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). Below 768px either becomes a scrolling row of tabs.
sectionsboolean=false: Show only the content section whose id matches the active nav item (href="#profile" shows id="profile"), and hide the others with hidden. Off, every section stays on the page, as for one long page the nav scrolls through.

SettingsNavItem

<arc-settings-nav-item>

A link to one section of the settings page, marked active by the layout from the URL hash.

hrefstring='': Where the item links to, usually a section's hash such as #profile.
activeboolean=false: Whether this is the current section. Managed by the parent layout from the URL hash; set it yourself when the layout is not in charge of routing.

Settings Layout

Overview

Guidelines

When to use

When not to use

Features

Preview

Profile

Security

Billing

Usage

API

SettingsNavItem

See Also

Docs

Project

Arclight