UI Components Easy

Menubar App

Desktop-style application menubar (File, Edit, View…) with nested submenus, keyboard shortcuts display, and full keyboard navigation.

Open in Lab

css vanilla-js

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #1a1c25;
  --menubar-bg: #13151c;
  --surface: #1e2130;
  --border: #2a2d3a;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #818cf8;
  --red: #f87171;
  --hover: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(129, 140, 248, 0.15);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Menubar ── */
.menubar {
  background: var(--menubar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 36px;
  gap: 2px;
  position: relative;
  z-index: 100;
  user-select: none;
}

.app-logo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  padding: 0 10px 0 4px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}

/* Menu trigger button */
.menu-trigger {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 9px;
  height: 100%;
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s, color .1s;
  white-space: nowrap;
}

.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] {
  background: var(--hover);
  color: var(--text);
}

.menu-trigger[aria-expanded="true"] {
  background: var(--active-bg);
  color: var(--accent);
}

/* ── Dropdown ── */
.menu-item-wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
}

.menu-dropdown.open {
  display: block;
  animation: menuIn .12s ease;
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Option */
.menu-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background .1s, color .1s;
}

.menu-option:hover {
  background: var(--hover);
}

.menu-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.menu-option--danger {
  color: var(--red);
}

.menu-option--danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

.menu-option--checked::before {
  content: "✓";
  color: var(--accent);
  font-size: 0.8rem;
  margin-right: -18px;
  width: 18px;
}

.shortcut {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Submenu ── */
.menu-item-wrap--sub {
  position: relative;
  width: 100%;
  height: auto;
}

.menu-option--submenu {
  justify-content: space-between;
}

.menu-dropdown--sub {
  position: absolute;
  top: -4px;
  left: calc(100% + 4px);
}

/* ── App content ── */
.app-content {
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.78rem;
  font-family: inherit;
}

.action-log {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.log-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--accent);
  animation: logIn .2s ease;
}

@keyframes logIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

const menubar = document.getElementById("menubar");
const log = document.getElementById("action-log");
let openMenu = null;

function openDropdown(trigger, dropdown) {
  closeAll();
  trigger.setAttribute("aria-expanded", "true");
  dropdown.classList.add("open");
  openMenu = { trigger, dropdown };
}

function closeAll() {
  document
    .querySelectorAll(".menu-trigger")
    .forEach((t) => t.setAttribute("aria-expanded", "false"));
  document.querySelectorAll(".menu-dropdown").forEach((d) => d.classList.remove("open"));
  document
    .querySelectorAll(".menu-option--submenu")
    .forEach((b) => b.setAttribute("aria-expanded", "false"));
  openMenu = null;
}

// Top-level menu triggers
menubar.querySelectorAll(".menu-trigger").forEach((trigger) => {
  const dropdown = document.getElementById(trigger.getAttribute("aria-controls"));
  if (!dropdown) return;

  trigger.addEventListener("click", (e) => {
    e.stopPropagation();
    if (trigger.getAttribute("aria-expanded") === "true") closeAll();
    else openDropdown(trigger, dropdown);
  });

  trigger.addEventListener("mouseenter", () => {
    if (openMenu && openMenu.trigger !== trigger) openDropdown(trigger, dropdown);
  });
});

// Submenu triggers
document.querySelectorAll(".menu-option--submenu").forEach((btn) => {
  const sub = btn.closest(".menu-item-wrap--sub")?.querySelector(".menu-dropdown--sub");
  if (!sub) return;

  btn.addEventListener("mouseenter", () => {
    btn.setAttribute("aria-expanded", "true");
    sub.classList.add("open");
  });
  btn.closest(".menu-item-wrap--sub").addEventListener("mouseleave", () => {
    btn.setAttribute("aria-expanded", "false");
    sub.classList.remove("open");
  });
});

// Click on menu options
document.querySelectorAll(".menu-option:not(.menu-option--submenu)").forEach((opt) => {
  opt.addEventListener("click", () => {
    const label = opt.querySelector("span:first-child")?.textContent?.trim();
    if (label) addLog(`Clicked: ${label}`);
    closeAll();
  });
});

// Outside click
document.addEventListener("click", closeAll);

// Escape
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeAll();
});

// Arrow key navigation between top-level items
menubar.addEventListener("keydown", (e) => {
  const triggers = [...menubar.querySelectorAll(".menu-trigger")];
  const idx = triggers.indexOf(document.activeElement);
  if (idx === -1) return;

  if (e.key === "ArrowRight") {
    e.preventDefault();
    const next = triggers[(idx + 1) % triggers.length];
    next.focus();
    if (openMenu) {
      const dd = document.getElementById(next.getAttribute("aria-controls"));
      if (dd) openDropdown(next, dd);
    }
  } else if (e.key === "ArrowLeft") {
    e.preventDefault();
    const prev = triggers[(idx - 1 + triggers.length) % triggers.length];
    prev.focus();
    if (openMenu) {
      const dd = document.getElementById(prev.getAttribute("aria-controls"));
      if (dd) openDropdown(prev, dd);
    }
  }
});

function addLog(text) {
  const el = document.createElement("div");
  el.className = "log-entry";
  el.textContent = text;
  log.prepend(el);
  if (log.children.length > 5) log.lastChild.remove();
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menubar App</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <!-- ── Application Menubar ── -->
    <div role="menubar" class="menubar" id="menubar" aria-label="Application menu">

        <span class="app-logo">✦ StealthApp</span>

        <!-- File -->
        <div class="menu-item-wrap" id="wrap-file">
            <button role="menuitem" class="menu-trigger" id="trigger-file" aria-haspopup="true" aria-expanded="false"
                aria-controls="menu-file">
                File
            </button>
            <div role="menu" class="menu-dropdown" id="menu-file" aria-label="File menu">
                <button role="menuitem" class="menu-option">
                    <span>New File</span><span class="shortcut">⌘N</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Open…</span><span class="shortcut">⌘O</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>Save</span><span class="shortcut">⌘S</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Save As…</span><span class="shortcut">⌘⇧S</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>Export as PDF</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option menu-option--danger">
                    <span>Quit</span><span class="shortcut">⌘Q</span>
                </button>
            </div>
        </div>

        <!-- Edit -->
        <div class="menu-item-wrap" id="wrap-edit">
            <button role="menuitem" class="menu-trigger" id="trigger-edit" aria-haspopup="true" aria-expanded="false"
                aria-controls="menu-edit">
                Edit
            </button>
            <div role="menu" class="menu-dropdown" id="menu-edit" aria-label="Edit menu">
                <button role="menuitem" class="menu-option">
                    <span>Undo</span><span class="shortcut">⌘Z</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Redo</span><span class="shortcut">⌘⇧Z</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>Cut</span><span class="shortcut">⌘X</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Copy</span><span class="shortcut">⌘C</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Paste</span><span class="shortcut">⌘V</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>Find &amp; Replace</span><span class="shortcut">⌘H</span>
                </button>
            </div>
        </div>

        <!-- View -->
        <div class="menu-item-wrap" id="wrap-view">
            <button role="menuitem" class="menu-trigger" id="trigger-view" aria-haspopup="true" aria-expanded="false"
                aria-controls="menu-view">
                View
            </button>
            <div role="menu" class="menu-dropdown" id="menu-view" aria-label="View menu">
                <button role="menuitem" class="menu-option menu-option--checked">
                    <span>Toolbar</span>
                </button>
                <button role="menuitem" class="menu-option menu-option--checked">
                    <span>Status Bar</span>
                </button>
                <div class="menu-divider"></div>
                <!-- Submenu -->
                <div class="menu-item-wrap menu-item-wrap--sub">
                    <button role="menuitem" class="menu-option menu-option--submenu" aria-haspopup="true"
                        aria-expanded="false">
                        <span>Zoom</span>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2.5">
                            <path d="m9 18 6-6-6-6" />
                        </svg>
                    </button>
                    <div role="menu" class="menu-dropdown menu-dropdown--sub">
                        <button role="menuitem" class="menu-option"><span>Zoom In</span><span
                                class="shortcut">⌘+</span></button>
                        <button role="menuitem" class="menu-option"><span>Zoom Out</span><span
                                class="shortcut">⌘−</span></button>
                        <button role="menuitem" class="menu-option"><span>Reset Zoom</span><span
                                class="shortcut">⌘0</span></button>
                    </div>
                </div>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>Toggle Fullscreen</span><span class="shortcut">F11</span>
                </button>
            </div>
        </div>

        <!-- Help -->
        <div class="menu-item-wrap" id="wrap-help">
            <button role="menuitem" class="menu-trigger" id="trigger-help" aria-haspopup="true" aria-expanded="false"
                aria-controls="menu-help">
                Help
            </button>
            <div role="menu" class="menu-dropdown" id="menu-help" aria-label="Help menu">
                <button role="menuitem" class="menu-option">
                    <span>Documentation</span>
                </button>
                <button role="menuitem" class="menu-option">
                    <span>Keyboard Shortcuts</span><span class="shortcut">⌘?</span>
                </button>
                <div class="menu-divider"></div>
                <button role="menuitem" class="menu-option">
                    <span>About StealthApp</span>
                </button>
            </div>
        </div>

    </div>

    <!-- App content area -->
    <main class="app-content">
        <p class="hint">Click a menu item above (or use ← → arrow keys). Press <kbd>Escape</kbd> to close.</p>
        <div id="action-log" class="action-log"></div>
    </main>

    <script src="script.js"></script>
</body>

</html>

Menubar App

A desktop-application-style menubar (File · Edit · View · Help) with dropdown menus, nested submenus, keyboard shortcut hints, dividers, and full keyboard navigation.

Features

Top-level menu items open on click (or hover after first open)
Nested submenus with arrow indicator and right-side expand
Keyboard shortcut labels aligned to the right (⌘S, Ctrl+Z, etc.)
Divider rows between groups
Keyboard: ←→ between top items, ↑↓ inside open menu, Escape closes
Click outside or focus-out closes open menus

How it works

Menu state is tracked with a currentOpenMenu variable; toggling adds .open class
Submenus are positioned left: 100% relative to their parent item
mouseenter on other top-level items auto-switches when one is already open
role="menubar", role="menu", role="menuitem" ARIA pattern