<div class="menu">
  <button class="open-popup" aria-haspopup="menu">Select a project</button>
  <div class="popup">
    <div data-active="0">
      <div>
        <button class="new" tabindex="-1" data-id="">New Project</button>
        <h3 id="recent-projects" class="section-title section-start" aria-hidden="true">Recent projects</h3>
        <ul aria-describedby="recent-projects">
          <li aria-describedby="recent-projects">
            <button tabindex="-1" data-id="aevum">Aevum</button>
          </li>
          <li aria-describedby="recent-projects">
            <button tabindex="-1" data-id="imperium">Imperium</button>
          </li>
          <li aria-describedby="recent-projects">
            <button tabindex="-1" data-id="saeculum">Saeculum</button>
          </li>
        </ul>
        <button class="more section-start" tabindex="-1">Other projects</button>
      </div>
      <div>
        <div class="search">
          <input type="search" id="search" class="text-search" placeholder="Search project" tabindex="-1" autocomplete="off" />
        </div>
        <h3 id="all-projects" class="section-title section-start" aria-hidden="true">All projects</h3>
        <ul class="list-with-search" aria-describedby="all-projects" id="all-projects-list">
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="aevum">Aevum</button>
          </li>
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="bellum">Bellum</button>
          </li>
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="imperium">Imperium</button>
          </li>
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="saeculum">Saeculum</button>
          </li>
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="saeculum-2">Saeculum II</button>
          </li>
          <li aria-describedby="all-projects">
            <button tabindex="-1" data-id="victor">Victor</button>
          </li>
        </ul>
        <button class="more section-start section-end" tabindex="-1">Your projects</button>
        <button class="back" tabindex="-1">Back</button>
      </div>
      <div>
        <h3 id="your-projects" class="section-title section-start" aria-hidden="true">Your projects</h3>
        <ul aria-describedby="your-projects">
          <li aria-describedby="your-projects">
            <button tabindex="-1" data-id="aevum">Aevum</button>
          </li>
          <li aria-describedby="your-projects">
            <button tabindex="-1" data-id="imperium">Imperium</button>
          </li>
          <li aria-describedby="your-projects">
            <button tabindex="-1" data-id="saeculum">Saeculum</button>
          </li>
        </ul>
        <button class="back section-start" tabindex="-1">Back</button>
      </div>
    </div>
  </div>
</div>

<form method="post" action="#">
  <label for="project-title">
    <span>Title</span>
    <input type="text" id="project-title" name="project-title" disabled />    
  </label>
  <label for="project-description">
    <span>Description</span>
    <textarea id="project-description" name="project-description" disabled></textarea>    
  </label>
  <button type="button">Close</button>
</form>
html, body {
  font-family: helvetica, arial, sans-serif;
}

.menu {
  --animation-time: 0.5s;
  --border-radius: 0.25rem;
  --margin: 0.5rem;
  --font: helvetica, arial, sans-serif;
  --font-size: 1rem;
  --height: 3rem;
  --max-elements: 3;
  --padding: 0.5rem 1rem;
  --primary: #3366ff;
  --primary--hover: #2255ee;
  --primary-text: #fafcfe;
  --secondary: #fff;
  --secondary--hover: #f4f6f8;
  --secondary-text: #222;
  --separator: rgba(0, 0, 0, 0.125);
  --shadow: rgba(0, 0, 0, 0.5);
  --title-size: 0.875em;
  --width: 12rem;

  font-family: var(--font);
  position: relative;

  *:focus {
    outline: 1px dashed var(--primary);
  }

  & > button {
    background: var(--primary);
    border: 0;
    border-radius: var(--border-radius);
    color: var(--primary-text);
    font-size: var(--font-size);
    outline-offset: 0.125rem;
    padding: var(--padding);
    height: var(--height);
    box-sizing: border-box;
    transition: background var(--animation-time);
    white-space: pre;

    &:hover {
      background: var(--primary--hover);
    }
  }

  .popup {
    width: var(--width);
    position: absolute;
    top: 100%;
    display: none;
    z-index: 1;
    overflow: hidden;
    margin-left: calc(-1 * var(--margin));

    &.open {
      display: block;
      align-items: flex-start;
      justify-content: flex-start;
    }

    &[data-active="0"] > div {
      transform: translate(0, 0);
    }

    &[data-active="1"] > div {
      transform: translate(calc(-1 * var(--width)), 0);
    }

    &[data-active="2"] > div {
      transform: translate(calc(-2 * var(--width)), 0);
    }

    & > div {
      position: relative;
      width: calc(3 * var(--width));
      overflow: hidden;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      transition: all var(--animation-time);

      & > div {
        margin: var(--margin);
        border-radius: var(--border-radius);
        box-shadow: 0 0 var(--margin) var(--shadow);
        width: var(--width);
        background: var(--secondary);
        overflow: hidden;
      }

      ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        max-height: calc(var(--max-elements) * var(--height));
        overflow: auto;
      }

      li {
        width: 100%;
        position: relative;
        height: var(--height);
        box-sizing: border-box;
      }

      h3 {
        font-size: var(--title-size);
        font-weight: lighter;
        margin: 0;
        padding: var(--padding);

        &.section-start {
          border-top: 1px solid var(--separator);
        }
      }

      button {
        background: var(--secondary);
        color: var(--secondary-text);
        border: 0;
        display: block;
        font-family: var(--font);
        font-size: var(--font-size);
        height: var(--height);
        padding: var(--padding);
        width: 100%;
        text-align: left;

        &.section-start {
          border-top: 1px solid var(--separator);
        }

        &.section-end {
          border-bottom: 1px solid var(--separator);
        }

        &.more::after {
          content: "\25BA";
          font-size: calc(0.5 * var(--font-size));
          margin-left: calc(0.5 * var(--margin));
          opacity: 0.5;
          vertical-align: middle;
        }

        &.back::before {
          content: "\25C0";
          font-size: calc(0.5 * var(--font-size));
          margin-right: calc(0.5 * var(--margin));
          opacity: 0.5;
          vertical-align: middle;
        }

        &.new::before {
          content: "\2295";
          margin-right: calc(0.5 * var(--margin));
          vertical-align: middle;
        }

        &:hover {
          background: var(--secondary--hover);
        }

        &:focus {
          background: var(--secondary--hover);
          outline-offset: -4px;
        }
      }

      div.search {
        position: relative;
        height: var(--height);
        box-sizing: border-box;

        &::before {
          content: "\1F50D";
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          width: calc(2 * var(--font-size));
          font-size: var(--font-size);
          height: 100%;
          pointer-events: none;
          user-select: none;
        }

        input {
          background: transparent;
          border: 0;
          display: block;
          font-family: var(--font);
          font-size: var(--font-size);
          height: 100%;
          padding: var(--padding);
          width: 100%;
          text-align: left;
          padding-left: calc(2 * var(--font-size));
          outline-offset: -3px;
        }
      }


    }
  }
}

form {
  display: none;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-top: 2rem;
  border-radius: 4px;

  label {
    display: block;
    margin-bottom: 1.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    & > span {
      display: block;
    }

    input, select, textarea {
      border: 1px solid #999;
      box-sizing: border-box;
      border-radius: 4px;
      height: 3rem;
      padding: 0.75rem;
      width: clamp(15rem, 50vw, 30rem);
      font-family: helvetica, arial, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
    }

    textarea {
      height: auto;
      min-height: 9rem;
    }
  }

  button {
    background: #3366ff;
    border: 0;
    border-radius: 4px;
    color: white;
    font-size :1rem;
    outline-offset: 0.125rem;
    padding: 0.5rem 1rem;
    height: 3rem;
    box-sizing: border-box;
    white-space: pre;
  }
}

@media (prefers-reduced-motion) {
  .menu, .menu * {
    transition: none !important;
  }
}
View Compiled
/**
 * The code is kind of messy, this is just a prototype
 */
const menu = document.querySelector(".menu");
const popup = menu.querySelector(".popup");
const trigger = menu.querySelector(".open-popup");
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
let animationTime = mediaQuery.matches ? 0 : 500;
let menuOpen = false;
let currentMenu = 0;
let activeIndex = 0;
let items = [];

/* global event listeners */
mediaQuery.addEventListener('change', () => {
  animationTime = mediaQuery.matches ? 0 : 500;
});

window.addEventListener("click", function() {
  if (menuOpen) {
    menuOpen = false;
    popup.classList.remove("open");
  }
})


// functions
function updateData(id) {  
  document.querySelector("form").style.display = "inline-block";

  const input = document.querySelector("form input");
  input.removeAttribute("disabled");
  input.value = data[id].id;
  input.focus();
  const textarea = document.querySelector("form textarea");
  textarea.removeAttribute("disabled");
  textarea.value = data[id].description;

  openClosePopup() 
}

function openClosePopup() {
  menuOpen = !menuOpen;
  activeIndex = 0;
  currentMenu = 0;
  popup.dataset.active = activeIndex;
  popup.classList.toggle("open");

  if (menuOpen) {
    items = popup.querySelectorAll(":scope > div > div:first-child [tabindex='-1']");
    items[0].focus();
  }
}

function moveRight() {
  currentMenu++;
  activeIndex = 0;
  popup.dataset.active = currentMenu;
  items = items = popup.querySelectorAll(`:scope > div > div:nth-child(${currentMenu+1}) [tabindex='-1']`);
  setTimeout("items[0].focus()", animationTime);
}

function moveLeft() {
  currentMenu = Math.max(0, currentMenu - 1);
  activeIndex = 0;
  popup.dataset.active = currentMenu;
  items = popup.querySelectorAll(`:scope > div > div:nth-child(${currentMenu+1}) [tabindex='-1']`);
  setTimeout("items[0].focus()", animationTime);
}

menu.addEventListener("click", function(e) {
  e.stopPropagation();
});

menu.addEventListener("keydown", function(e) {
  const key = e.key.toLowerCase();
  const target = e.target;

  // logic for the open/close of the menu popup
  if (target.className === "open-popup" && ["enter", "down", "arrowdown"].indexOf(key) > -1) {
    e.preventDefault();
    e.stopPropagation();
    openClosePopup();
    return;
  }

  // key interaction inside the popup
  switch(key) {
    case "down":
    case "arrowdown":
      activeIndex = (activeIndex + 1) % items.length;
      items[activeIndex].focus();
      break;
    case "up":
    case "arrowup":
      if (--activeIndex < 0) { activeIndex = items.length - 1; }
      items[activeIndex].focus();
      break;
    case "right":
    case "arrowright":
      if ([...target.classList].indexOf("more") > -1) {
        moveRight();
      }
      break;
    case "left":
    case "arrowleft":
      if ([...target.classList].indexOf("back") > -1) {
        moveLeft();
      }
      break;
    case "space":
    case " ":
    case "enter":
      const classes = [...target.classList];
      if (classes.indexOf("more") > -1) {
        e.preventDefault();
        moveRight();
      } else if (classes.indexOf("back") > -1) {
        e.preventDefault();
        moveLeft();
      }
      break;
    case "escape":
    case "esc":
    case "tab":
      menuOpen = false;
      activeIndex = 0;
      currentMenu = 0;
      popup.dataset.active = currentMenu;
      popup.classList.remove("open");
      if (key !== "tab") {
        trigger.focus();
      }
      break;
  }
});

trigger.addEventListener("click", openClosePopup)

const moreButtons = popup.querySelectorAll("button.more");
for (let x = 0; x < moreButtons.length; x++) {
  moreButtons[x].addEventListener("click", moveRight);
}

const backButtons = popup.querySelectorAll("button.back");
for (let x = 0; x < backButtons.length; x++) {
  backButtons[x].addEventListener("click", moveLeft);
}

const dataButtons = popup.querySelectorAll("button[data-id]");
for (let x = 0; x < dataButtons.length; x++) {
  dataButtons[x].addEventListener("click", function() {
    updateData(this.dataset.id);
  });
}

// function updateList(projectList) {
//   const allProjectsList = menu.querySelector("#all-projects-list");
//   let listHTML = "";
  
//   for (const [key, value] of Object.entries(projectList)) {
//     if (key !== "") {
//       listHTML += `<li aria-describedby="all-projects">
//             <button tabindex="-1" data-id="${key}">${value.id}</button>
//           </li>`;
//     }
//   }
  
//   allProjectsList.innerHTML = listHTML;
//   items = popup.querySelectorAll(`:scope > div > div:nth-child(${currentMenu+1}) [tabindex='-1']`);
// }

// popup.querySelector("input").addEventListener("keyup", function(e) {
//   const inputValue = e.target.value;
//   if (e.key.toLowerCase() === "enter") {
//     let filteredProjects = {};
//     for (const [key, value] of Object.entries(data)) {
//       if (value.id.toLowerCase().indexOf(inputValue) > -1) {
//         filteredProjects[key] = { 
//           id: value.id, 
//           description: value.description 
//         };
//       }
//     }
//     updateList(filteredProjects);
//   }
// });

// popup.querySelector("input").addEventListener("blur", function(e) {
//   if (this.value === "") {
//     // reset the filtered values
//     updateList(data);
//   }
// });

/** Form logic and data **/
document.querySelector("form button").addEventListener("click", function() {
  document.querySelector("form").style.display = "none";
  trigger.focus();
});
const data = {
  "": {
    id: "",
    description: ""
  },
  "aevum": {
    id: "Aevum",
    description: "Aevum means 'age' in latin!"
  },
  "bellum": {
    id: "Bellum",
    description: "Bellum means 'war' in latin!"
  },
  "imperium": {
    id: "Imperium",
    description: "Imperium means 'government' in latin!"
  },
  "saeculum": {
    id: "Saeculum",
    description: "Saeculum means 'century' in latin!"
  },
  "saeculum-2": {
    id: "Saeculum II",
    description: "Second part of the Saeculum project. Saeculum means 'century' in latin!"
  },
  "victor": {
    id: "Victor",
    description: "Victor means 'winner' in latin!"
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.