Drill-Down Settings Navigation — Free iOS-Style Panel Nav JS Snippet

<div class="dd-app">
  <div class="dd-panels" id="ddPanels">
    <div class="dd-panel" data-panel="root" data-depth="0">
      <div class="dd-panel-header">
        <span class="dd-panel-title">Settings</span>
      </div>
      <button class="dd-row" data-target="account">
        <span>Account</span>
        <span class="dd-chevron">›</span>
      </button>
      <button class="dd-row" data-target="notifications">
        <span>Notifications</span>
        <span class="dd-chevron">›</span>
      </button>
      <button class="dd-row" data-target="privacy">
        <span>Privacy &amp; Security</span>
        <span class="dd-chevron">›</span>
      </button>
      <button class="dd-row" data-leaf="1">
        <span>About</span>
      </button>
    </div>

    <div class="dd-panel" data-panel="account" data-depth="1">
      <div class="dd-panel-header">
        <button class="dd-back" data-back="1">‹ Settings</button>
        <span class="dd-panel-title">Account</span>
      </div>
      <button class="dd-row" data-target="account-profile">
        <span>Profile</span>
        <span class="dd-chevron">›</span>
      </button>
      <button class="dd-row" data-leaf="1"><span>Change password</span></button>
      <button class="dd-row" data-leaf="1"><span>Linked devices</span></button>
    </div>

    <div class="dd-panel" data-panel="account-profile" data-depth="2">
      <div class="dd-panel-header">
        <button class="dd-back" data-back="1">‹ Account</button>
        <span class="dd-panel-title">Profile</span>
      </div>
      <button class="dd-row" data-leaf="1"><span>Display name</span></button>
      <button class="dd-row" data-leaf="1"><span>Avatar</span></button>
      <button class="dd-row" data-leaf="1"><span>Bio</span></button>
    </div>

    <div class="dd-panel" data-panel="notifications" data-depth="1">
      <div class="dd-panel-header">
        <button class="dd-back" data-back="1">‹ Settings</button>
        <span class="dd-panel-title">Notifications</span>
      </div>
      <button class="dd-row" data-leaf="1"><span>Email</span></button>
      <button class="dd-row" data-leaf="1"><span>Push</span></button>
      <button class="dd-row" data-leaf="1"><span>SMS</span></button>
    </div>

    <div class="dd-panel" data-panel="privacy" data-depth="1">
      <div class="dd-panel-header">
        <button class="dd-back" data-back="1">‹ Settings</button>
        <span class="dd-panel-title">Privacy &amp; Security</span>
      </div>
      <button class="dd-row" data-leaf="1"><span>Two-factor authentication</span></button>
      <button class="dd-row" data-leaf="1"><span>Active sessions</span></button>
      <button class="dd-row" data-leaf="1"><span>Data export</span></button>
    </div>
  </div>
  <p class="dd-crumb" id="ddCrumb">Settings</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; justify-content: center; padding: 40px 20px; }

.dd-app { width: 100%; max-width: 340px; }

.dd-panels { position: relative; height: 320px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,23,42,0.06); }

.dd-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 6px; background: #fff;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.dd-panel[data-depth="0"] { transform: translateX(0); }
.dd-panel.active { transform: translateX(0); z-index: 2; }
.dd-panel.behind { transform: translateX(-30%); z-index: 1; }

.dd-panel-header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 12px; }
.dd-panel-title { font-size: 14.5px; font-weight: 800; color: #1e293b; }
.dd-back {
  background: none; border: none; color: #6366f1; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; padding: 4px 6px 4px 0;
}
.dd-back:hover { text-decoration: underline; }

.dd-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; text-align: left;
  padding: 12px 10px; font-size: 13.5px; font-weight: 600; color: #334155;
  cursor: pointer; font-family: inherit; border-radius: 8px; transition: background 0.12s;
}
.dd-row:hover { background: #f1f5f9; }
.dd-chevron { color: #94a3b8; font-size: 16px; }

.dd-crumb { margin-top: 10px; font-size: 11px; color: #94a3b8; font-weight: 600; text-align: center; }

const panels = document.querySelectorAll('.dd-panel');
const panelMap = new Map();
panels.forEach((p) => panelMap.set(p.dataset.panel, p));

let stack = ['root'];

function crumbTrail() {
  return stack
    .map((name) => panelMap.get(name).querySelector('.dd-panel-title').textContent)
    .join(' \u2039 ');
}

function render() {
  const current = stack[stack.length - 1];
  panels.forEach((p) => {
    p.classList.remove('active', 'behind');
    if (p.dataset.panel === current) {
      p.classList.add('active');
    } else if (stack.includes(p.dataset.panel)) {
      p.classList.add('behind');
    }
  });
  document.getElementById('ddCrumb').textContent = crumbTrail();
}

function goTo(name) {
  if (!panelMap.has(name)) return;
  stack.push(name);
  render();
}

function goBack() {
  if (stack.length > 1) {
    stack.pop();
    render();
  }
}

document.getElementById('ddPanels').addEventListener('click', (e) => {
  const backBtn = e.target.closest('[data-back]');
  if (backBtn) {
    goBack();
    return;
  }
  const row = e.target.closest('.dd-row');
  if (row && row.dataset.target) {
    goTo(row.dataset.target);
  }
});

render();