<section class="section section-tokens" aria-labelledby="navigation-heading">
  <h2 id="navigation-heading">Navigation Shell</h2>

  <div class="navigation-shell" style="min-height: 300px">
    <header class="navigation-topbar">
      <button class="navigation-toggle btn btn-sm btn-tertiary" data-navigation-toggle type="button">
        <i class="ph ph-list"></i>
      </button>
      <div class="navigation-brand">VMK App</div>
    </header>

    <aside class="navigation-sidebar">
      <nav class="navigation-menu">
        <a href="#" class="navigation-item is-active">
          <span class="navigation-item-icon"><i class="ph ph-house"></i></span>
          Dashboard
        </a>
        <a href="#" class="navigation-item">
          <span class="navigation-item-icon"><i class="ph ph-chart-bar"></i></span>
          Analytics
        </a>
        <a href="#" class="navigation-item">
          <span class="navigation-item-icon"><i class="ph ph-gear"></i></span>
          Settings
        </a>
      </nav>
    </aside>

    <div class="navigation-backdrop"></div>

    <main class="navigation-content">
      <p>Main content area inside the navigation shell.</p>
    </main>
  </div>
</section>