Menu in your Laravel app - Conditional Items Based on Permissions

[Fzoltan87]

Hello.

How can I create this menu structure in Laravel?
It would be important for the menu item to disappear or appear based on permission.

Example:
All menu items: Chat, Mailbox, Invoice (List, Preview, Add, Edit), Calendar
He has two roles: administrator and moderator
Admin can see all permissions (Chat, Mailbox, Invoice (List, Preview, Add, Edit), Calendar)
The moderator only has a Chat, Invoice (List, Preview), Calendar

<li class="nav-item">
	<ul>
		<li class="nav-item">
			<a href="/chat" class="group">
				<div class="flex items-center">
					<span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Chat</span>
				</div>
			</a>
		</li>
		
		<li class="nav-item">
			<a href="/apps/mailbox" class="group">
				<div class="flex items-center">
					<span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Mailbox</span>
				</div>
			</a>
		</li>
		
		<li class="menu nav-item">
			<button type="button" class="nav-link group" :class="{ 'active': activeDropdown === 'invoice' }" @click="activeDropdown === 'invoice' ? activeDropdown = null : activeDropdown = 'invoice'">
				<div class="flex items-center">
					<span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Invoice</span>
				</div>
				<div class="rtl:rotate-180" :class="{ '!rotate-90': activeDropdown === 'invoice' }">
					<svg></svg>
				</div>
			</button>
			<ul x-show="activeDropdown === 'invoice'" x-collapse="" class="sub-menu text-gray-500" style="height: 0px; overflow: hidden; display: none;" hidden="">
				<li>
					<a href="/apps/invoice/list">List</a>
				</li>
				<li>
					<a href="/apps/invoice/preview">Preview</a>
				</li>
				<li>
					<a href="/apps/invoice/add">Add</a>
				</li>
				<li>
					<a href="/apps/invoice/edit">Edit</a>
				</li>
			</ul>
		</li>
		
		<li class="nav-item">
			<a href="/apps/calendar" class="group">
				<div class="flex items-center">
					<span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Calendar</span>
				</div>
			</a>
		</li>
		
	</ul>
</li>

[sebastiandedeyne]

Please refer to our docs for more information on building menus. Our guide to conditionally adding items should help: https://spatie.be/docs/menu/v3/items-in-depth/conditionally-adding-items