<header class="nav-topbar">
  <button class="nav-topbar-toggle" type="button" data-navigation-toggle
    aria-controls="app-navigation" aria-expanded="false">
    <i class="ph ph-sidebar-simple"></i>
    <span>Menu</span>
  </button>
  <div class="nav-topbar-brand">
    <img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
    <span>Product Console</span>
  </div>
  <div class="nav-topbar-current">Overview</div>
</header>

<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="app-navigation" data-navigation-drawer
  aria-label="Main navigation" aria-hidden="true" inert>
  <header class="nav-drawer-header">
    <div>
      <div class="nav-drawer-title">Navi</div>
      <div class="nav-drawer-subtitle">Workspace</div>
    </div>
    <button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
      <i class="ph ph-x"></i>
    </button>
  </header>

  <nav class="nav-drawer-body">
    <ul class="list list-nav">
      <li class="list-item list-item-active">
        <a class="list-action" href="/overview" data-navigation-link>
          <span class="list-label"><i class="ph ph-house"></i> Overview</span>
        </a>
      </li>
    </ul>
  </nav>

  <footer class="nav-drawer-footer">
    <span>Version 0.2</span>
    <span>© GNexus</span>
  </footer>
</aside>

NavigationShell.init();

// Available on the global namespace too:
GNexusUIKit.NavigationShell.init();

<footer class="nav-drawer-footer">
  <a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer">
    <span class="identity">
      <span class="avatar avatar-primary avatar-sm is-online">
        <img src="..." alt="">
      </span>
      <span class="identity-content">
        <span class="identity-title">Name</span>
        <span class="identity-meta">email@example.com</span>
      </span>
    </span>
  </a>
  <button class="btn-icon" aria-label="Edit profile">
    <i class="ph ph-pencil-simple"></i>
  </button>
  <button class="btn-icon" aria-label="Logout">
    <i class="ph ph-sign-out"></i>
  </button>
</footer>

<GnNavigationShell :items="navItems" brand="Product Console" ...>
  <template #footer>
    <a class="profile-identity" href="/profile" target="_blank">
      <GnIdentity
        title="Eugene Sukhodolskiy"
        meta="goldmikki@gmail.com"
        :avatar="{ src: '...', status: 'online', size: 'sm' }"
      />
    </a>
    <GnIconButton icon="ph-pencil-simple" label="Edit profile" />
    <GnIconButton icon="ph-sign-out" label="Logout" />
  </template>
</GnNavigationShell>