Site Menu Management System Development

Site Menu Management System Development

A site menu management system allows website administrators to change navigation structure without developer involvement. Important for sites with dynamic content: new sections, seasonal changes, A/B-testing navigation.

Data Model

menus (
  id, name, slug, locale
  -- 'main_menu', 'footer_menu', 'mobile_menu'
)

menu_items (
  id, menu_id, parent_id, order,
  type: link | page | category | custom,
  label, url,
  page_id,     -- if type=page
  category_id, -- if type=category
  target: _self | _blank,
  icon,
  is_visible, css_class,
  attributes (jsonb)  -- data-attributes, id
)

Drag-and-drop Interface

For managing nested structure — @dnd-kit/sortable or react-sortable-tree library:

import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';

function MenuEditor({ items, onReorder }) {
    const [treeItems, setTreeItems] = useState(buildTree(items));

    const handleDragEnd = ({ active, over }) => {
        if (!over || active.id === over.id) return;
        const oldIndex = treeItems.findIndex(i => i.id === active.id);
        const newIndex = treeItems.findIndex(i => i.id === over.id);
        const reordered = arrayMove(treeItems, oldIndex, newIndex);
        setTreeItems(reordered);
        onReorder(reordered.map(({ id }, order) => ({ id, order })));
    };

    return (
        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
            <SortableContext items={treeItems} strategy={verticalListSortingStrategy}>
                {treeItems.map(item => (
                    <SortableMenuItem key={item.id} item={item} />
                ))}
            </SortableContext>
        </DndContext>
    );
}

Server-side: Menu Retrieval with Caching

class MenuService
{
    public function getMenu(string $slug, string $locale): array
    {
        return Cache::remember("menu:{$slug}:{$locale}", 3600, function () use ($slug, $locale) {
            $menu = Menu::where('slug', $slug)->where('locale', $locale)->first();
            if (!$menu) return [];

            return $this->buildTree(
                $menu->items()
                    ->where('is_visible', true)
                    ->orderBy('order')
                    ->get()
                    ->toArray()
            );
        });
    }

    private function buildTree(array $items, ?int $parentId = null): array
    {
        return collect($items)
            ->where('parent_id', $parentId)
            ->map(fn($item) => array_merge($item, [
                'children' => $this->buildTree($items, $item['id'])
            ]))
            ->values()
            ->toArray();
    }
}

Cache Invalidation

When menu changes — clear cache:

Menu::observe(MenuObserver::class);

class MenuObserver
{
    public function saved(Menu $menu): void
    {
        Cache::forget("menu:{$menu->slug}:{$menu->locale}");
    }
}

Menu Item Types

For page and category types, URL is generated automatically when page/category slug changes.

Development timeline: 2–3 days for system with drag-and-drop and multiple item types.