Sidebar Settings Nav

Fetch pattern JSON: curl https://webspire.de/patterns/sidebar/settings-nav.json

settings-nav.html

<section class="ws-sidebar-settings-nav" style="--ws-settings-bg: #f8fafc; --ws-settings-panel: #ffffff; --ws-settings-text: #0f172a; --ws-settings-text-soft: #64748b; --ws-settings-border: #e2e8f0; --ws-settings-accent: #2563eb;"> <!-- ws-ok: token definitions -->
  <div class="grid min-h-[680px] overflow-hidden rounded-3xl border border-[var(--ws-settings-border)] bg-[var(--ws-settings-bg)] lg:grid-cols-[280px_1fr]">
    <aside class="border-b border-[var(--ws-settings-border)] bg-[var(--ws-settings-panel)] lg:border-b-0 lg:border-r">
      <div class="border-b border-[var(--ws-settings-border)] px-6 py-5">
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-settings-text-soft)]">Settings</p>
        <h2 class="mt-2 text-lg font-semibold text-[var(--ws-settings-text)]">Workspace preferences</h2>
      </div>
      <nav class="space-y-1 px-4 py-4" aria-label="Settings navigation">
        <a href="#" class="block rounded-xl bg-[var(--ws-settings-accent)]/10 px-4 py-3 text-sm font-semibold text-[var(--ws-settings-accent)]" aria-current="page">General</a>
        <a href="#" class="block rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-settings-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-settings-text)]">Members</a>
        <a href="#" class="block rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-settings-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-settings-text)]">Notifications</a>
        <a href="#" class="block rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-settings-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-settings-text)]">Billing</a>
        <a href="#" class="block rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-settings-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-settings-text)]">API Keys</a>
      </nav>
    </aside>
    <div class="bg-[var(--ws-settings-panel)] p-6">
      <div class="max-w-2xl">
        <h3 class="text-xl font-semibold text-[var(--ws-settings-text)]">General settings</h3>
        <p class="mt-1 text-sm text-[var(--ws-settings-text-soft)]">A settings-focused sidebar pattern with a clear current section and content stage.</p>
        <div class="mt-8 space-y-6">
          <div>
            <label class="block text-sm font-medium text-[var(--ws-settings-text)]">Workspace name</label>
            <input type="text" value="Orbit Workspace" class="mt-1.5 w-full rounded-xl border border-[var(--ws-settings-border)] px-3 py-2.5 text-sm text-[var(--ws-settings-text)] focus:border-[var(--ws-settings-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-settings-accent)]/15" />
          </div>
          <div>
            <label class="block text-sm font-medium text-[var(--ws-settings-text)]">Support email</label>
            <input type="email" value="support@orbit.app" class="mt-1.5 w-full rounded-xl border border-[var(--ws-settings-border)] px-3 py-2.5 text-sm text-[var(--ws-settings-text)] focus:border-[var(--ws-settings-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-settings-accent)]/15" />
          </div>
          <div class="rounded-2xl border border-[var(--ws-settings-border)] p-4">
            <div class="flex items-start justify-between gap-4">
              <div>
                <p class="text-sm font-semibold text-[var(--ws-settings-text)]">Public workspace</p>
                <p class="mt-1 text-sm text-[var(--ws-settings-text-soft)]">Allow external share links for preview pages and reports.</p>
              </div>
              <button type="button" class="rounded-full bg-[var(--ws-settings-accent)]/15 px-3 py-1 text-xs font-semibold text-[var(--ws-settings-accent)]">Enabled</button>
            </div>
          </div>
          <div class="flex justify-end gap-3">
            <button type="button" class="rounded-xl border border-[var(--ws-settings-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-settings-text)]">Cancel</button>
            <button type="button" class="rounded-xl bg-[var(--ws-settings-accent)] px-4 py-2.5 text-sm font-semibold text-white">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

sidebar

Tier

enhanced

Kind

layout

Extends

sidebar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

sidebarsettingsnavigationpreferenceslayout

Slots

Name	Required	Description
navigation	Yes	Settings section links with a clear active state.
content	Yes	Main configuration stage for the selected settings section.

Settings-focused sidebar layout. Keeps the left rail tightly scoped to configuration sections so the overall page feels more intentional than a generic dashboard shell.