Menus

# Brok UI: Nested Menu (`nested-menu`)

A hierarchical, inline-expanding menu built on native <details>, rendered recursively for arbitrary depth.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add nested-menu
```

## Usage

```blade
<div class="w-full flex justify-center py-4">
    <x-ui.nested-menu :items="[
        ['label' => 'New', 'children' => [
            ['label' => 'Document', 'href' => '#'],
            ['label' => 'Folder', 'href' => '#'],
            ['label' => 'From template', 'children' => [
                ['label' => 'Meeting notes', 'href' => '#'],
                ['label' => 'Project brief', 'href' => '#'],
            ]],
        ]],
        ['label' => 'Share', 'children' => [
            ['label' => 'Copy link', 'href' => '#', 'shortcut' => '⌘C'],
            ['label' => 'Invite people', 'href' => '#'],
        ]],
        ['label' => 'Settings', 'href' => '#'],
    ]" />
</div>
```

## Props

- `items` (array, default `[…]`) — Tree of menu entries; each item has a label and either an href or a children array for a nested branch.
- `level` (int, default `0`) — Internal recursion depth used to add the guide rail and indent on nested lists; consumers do not set this.

## Use when

- Use for secondary actions when compact access is more important than constant visibility.
- Presenting a deeply nested navigation or command tree that should stay inline rather than opening floating submenus.
- Needing expand/collapse to work with no JavaScript, since each branch is a native details/summary element.

## Avoid when

- Do not hide the most frequent or highest-value actions in a menu when discoverability matters.
- Only one or two shallow levels are needed; use dropdown with a submenu instead of the recursive inline structure.
- The menu should float over the page instead of pushing surrounding content; use dropdown or context-menu.

## Anti-patterns

- Hiding primary actions in menus

## Rules

- Use the `<brok:nested-menu>` tag (or `<x-ui.nested-menu>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/nested-menu
- Registry JSON (files, props, contract): https://brokui.dev/r/open/nested-menu.json

@props([
    'items' => [
        ['label' => 'New', 'children' => [
            ['label' => 'Document', 'href' => '#'],
            ['label' => 'Folder', 'href' => '#'],
            ['label' => 'From template', 'children' => [
                ['label' => 'Meeting notes', 'href' => '#'],
                ['label' => 'Project brief', 'href' => '#'],
            ]],
        ]],
        ['label' => 'Share', 'children' => [
            ['label' => 'Copy link', 'href' => '#'],
            ['label' => 'Invite people', 'href' => '#'],
        ]],
        ['label' => 'Settings', 'href' => '#'],
    ],
    'level' => 0,
])

@php
    $items = is_array($items) ? $items : [];
@endphp

{{--
    Nested menu — a hierarchical, inline-expanding menu. Each branch is a native
    <details>/<summary>, so expand/collapse works with the keyboard and assistive
    tech without any JS; the chevron rotates on open (and mirrors under RTL). The
    component renders itself recursively for arbitrary depth — the `level` prop is
    internal and adds the guide rail / indent on nested lists.
--}}
@if ($level === 0)
<nav
    data-slot="nested-menu"
    aria-label="{{ __('Nested menu') }}"
    {{ $attributes->merge(['class' => 'w-60 max-w-full rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md']) }}
>
@endif
    <ul class="space-y-0.5 {{ $level > 0 ? 'ms-3 border-s border-border ps-1' : '' }}">
        @foreach ($items as $item)
            <li>
                @if (! empty($item['children']))
                    {{-- The chevron is scoped to ITS OWN details (direct-child combinator), so an
                         open parent never turns the chevrons of closed children. --}}
                    <details class="[&[open]>summary>svg]:rotate-90">
                        <summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none [&::-webkit-details-marker]:hidden">
                            <span class="flex-1 truncate">{{ $item['label'] ?? '' }}</span>
                            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 rtl:-scale-x-100 motion-reduce:transition-none">
                                <path d="m9 6 6 6-6 6" />
                            </svg>
                        </summary>
                        <x-ui.nested-menu :items="$item['children']" :level="$level + 1" />
                    </details>
                @else
                    <a
                        href="{{ $item['href'] ?? '#' }}"
                        class="flex items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none"
                    >
                        <span class="flex-1 truncate">{{ $item['label'] ?? '' }}</span>
                        @if (! empty($item['shortcut']))
                            <kbd class="ms-auto text-xs text-muted-foreground">{{ $item['shortcut'] }}</kbd>
                        @endif
                    </a>
                @endif
            </li>
        @endforeach
    </ul>
@if ($level === 0)
</nav>
@endif