Как написать многоуровневое меню в jade?

Чтобы создать многоуровневое меню в Pug (ранее назывался Jade), вам понадобится использовать рекурсию.

Сначала давайте создадим простую структуру данных для представления меню. Представим, что у нас есть массив объектов, где каждый объект представляет один элемент меню:

const menuItems = [
  { name: 'Главная', url: '/' },
  {
    name: 'О нас',
    submenu: [
      { name: 'Команда', url: '/team' },
      { name: 'История', url: '/history' },
    ],
  },
  {
    name: 'Услуги',
    submenu: [
      { name: 'Разработка', url: '/development' },
      { name: 'Дизайн', url: '/design' },
    ],
  },
  { name: 'Контакты', url: '/contacts' },
];

Затем мы можем создать миксин (многоразовый блок кода), который будет генерировать код для каждого элемента меню:

mixin menuItem(item)
  li
    a(href=item.url)= item.name
    if item.submenu
      ul
        each subitem in item.submenu
          +menuItem(subitem)

Теперь мы можем использовать этот миксин для создания меню:

ul
  each item in menuItems
    +menuItem(item)

Тут мы проходимся по каждому элементу массива menuItems и вызываем миксин menuItem для каждого элемента. Если у элемента есть подменю, мы создаем вложенную разметку с помощью рекурсии.

Таким образом, при выводе HTML получим вложенную разметку, которая создаст многоуровневое меню:

<ul>
  <li>
    <a href="/">Главная</a>
  </li>
  <li>
    <a href="#">О нас</a>
    <ul>
      <li>
        <a href="/team">Команда</a>
      </li>
      <li>
        <a href="/history">История</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Услуги</a>
    <ul>
      <li>
        <a href="/development">Разработка</a>
      </li>
      <li>
        <a href="/design">Дизайн</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/contacts">Контакты</a>
  </li>
</ul>

Надеюсь, это поможет вам создать многоуровневое меню в Pug.