How to build Recursive Side Navbar Menu Component with Vue 3

Sometimes we need to create a recursive sidebar (with the ability to call yourself repeatedly) to display menus with multiple levels of depth coming from an API.

Overview:

To implement a recursive Side Navbar Menu, we will develop recursive components that can build the Side Navbar Menu dynamically without limitations on nesting depth, in order to achieve Navbar Menu structure scalable and adaptable to any changes in the API or Navbar structure.

Get Started:

In this tutorial, you will learn how to build recursive sidebar components in Vue 3. Recursive sidebars are a powerful way to render hierarchical menus with nested submenus and customizable items. They allow you to create a dynamic and scalable structure for navigation in your application.

Requirements:

Before you start, make sure you have Node.js and npm installed on your system. In addition, a basic knowledge of Vue.js, TypeScript and Tailwindcss is required.

Step 1: Project Settings
First, we will create a new Vue 3 project. If you already have an existing project, you can skip this step. In this case we will use vite to facilitate setup.

# Crear un nuevo proyecto Vue
npm create vite@latest

Follow the instructions to setting your project. Be sure to select Vue and TypeScript and Tailwindcss.

Step 2: Datas Structure
The data structure is essential to render a hierarchical menu. In this tutorial, we will use a nested object to define our menu. For example:

{
  "name": "Inicio",
  "items": [
    {
      "name": "Opción 1",
      "items": [
        {
          "name": "Subopción 1",
          "items": []
        },
        {
          "name": "Subopción 2",
          "items": []
        }
      ]
    },
    {
      "name": "Opción 2",
      "items": []
    }
  ]
}

Make sure you have similar menu details to get started.

Step 3: Create root Sidebar component

We create the component for the Sidebar.vue in the src/components folder. This will be our main container for menu items

// path: src/components/Sidebar.vue
<template>
  <ul class="card">
    <li>
      <details>
        <summary class="flex group my-1 text-left max-w-xs">
          <div
            class="flex items-center cursor-pointer group-hover:bg-gray-200 rounded-full py-1 pr-4 gap-0 bg-gray-100 w-full"
            :style="{
              paddingLeft:
                item.items && item.items.length > 0
                  ? 24 * level - 16 + 'px'
                  : 24 * level + 'px',
            }"
          >
            <div v-if="item.items && item.items.length > 0">
              <svg
                class="h-4 w-4 text-gray-400"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 24 24"
                width="1.2em"
                height="1.2em"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="m6 9l6 6l6-6"
                ></path>
              </svg>
            </div>
            <div class="font-medium pl-1 truncate group-hover:text-indigo-400">
              {{ item.name }}
            </div>
          </div>
        </summary>
      </details>
    </li>
  </ul>
</template>

Step 4: Recursion

The most important feature of a recursive sidebar is its ability to handle nested submenus. In order to achieve it, we will use recursion in the component. Modifies the Sidebar.vue component so it can handle submenus recursively.

  ...
  <li v-for="item in items" :key="item.name">
  ...
    <div>
        <!-- Llamada recursiva al componente Sidebar -->
      <RecursiveSidebar
        v-if="item.items && item.items.length > 0"
        :items="item.items"
        :level="level + 1"
      />
    </div>

In this step, we have added a v-for loop to map the menu items, and if an item has submenus, we call the Sidebar component recursively to handle them.

Conclusions:

The use of a recursive sidebar is presented as a flexible solution for hierarchical menus with multiple levels. Recursion simplifies submenus management and facilitates adaptation to changes in the structure or API. By connecting it to an API in real time, you get automatic updates. This approach allows you to create dynamic and adaptable menus in applications.

If you want to see a full implementation example of a recursive sidebar in Vue 3, you can access the example repository on GitHub. ¡Take advantage of this powerful tool in your projects!

Author: OYaipen