Menus

Concept

Menus provide a way structure your navigation links throughout your Pages. This includes; top navigation, main navigation, footer navigation, custom navigation on a singular page, etc.

Menus and their Menu Items are all database-driven, meaning they are created and managed entirely through the Filament CMS.

Menu Items

Every Menu has an array of children called Menu Items. These are the actual "Links" that are displayed and rendered on the page to the users.

Every Menu Item has multiple properties that are customizable within the CMS:

• Position = the order at which the Menu Item is displayed relative to the other Menu Items.
• Parent Association = a link to an existing Menu Item in which to nest other Items under, creating submenus.
• Outside Link = a full URL used to link to external sources or sites.
• Page Association = a way to link to a [Page](/docs/pages) and automatically use its Slug.
• Alternative Label = a way to override the displayed link label.

Usage

Adding to a Template

Every Menu has a name that is used to access it. An example is a new Menu named "Main Navigation." Using the Menu's View Composer, that Menu is auto-injected onto a Page and is accessed by its name, i.e. $main_navigation.

It is also best practice to wrap any Menu rendering in an "isset" Blade function. This is because a User can change the nameof a Menu at anytime within the CMS, causing an error when trying to iterate over a non-existent variable.

    
1<nav role="navigation" aria-label="Main Navigation">
2    @isset($main_navigation)
3        <!-- Access and render the Menu -->
4    @endisset
5</nav>

Rendering Menu Items

When iterating over a Menu to render its Menu Items, the main properties you will need to use are:

• Menu = 'menu_items'
• Menu Item = 'name' and 'link'

The 'name' and 'link' properties on a Menu Item are custom Accessors on the Menu Item model that will automatically resolve the Menu Item Name/"Label," based on if an Alternative Label is given or if a Page is tied to it (using the Page's Name), and the Menu Item Link, based on if a custom URL slug is given or if a Page is tied to it (using the Page's Slug).

    
 1<nav role="navigation" aria-label="Main Navigation">
 2    @isset($main_navigation)
 3        <ul class="flex flex-row pl-0 list-none">
 4            @foreach($main_navigation['menu_items'] as $navigation_item)
 5                <a href="{{ $navigation_item['link'] }}" class="group text-xl px-4">
 6                    {{ $navigation_item['name'] }}
 7                </a>
 8            @endforeach
 9        </ul>
10    @endisset
11</nav>

Nested Menu Items

You can also nest Menu Items within other Menu Items, to create submenus. This is done when creating a new Menu Item and setting its "Parent Association" to another, existing Menu Item.

It's important to note that deeply nested Menu Items can become cumbersome to manage. If a User adds a deeply nested Menu Item but the display does not account for it, then it will not show up. It's best practice to only nested Menu Items two levels deep at maximum.

    
 1<nav role="navigation" aria-label="Main Navigation">
 2    @isset($main_navigation)
 3        <ul class="flex flex-row pl-0 list-none">
 4            @foreach($main_navigation['menu_items'] as $navigation_item)
 5                <a href="{{ $navigation_item['link'] }}" class="group text-xl px-4">
 6                    {{ $navigation_item['name'] }}
 7                </a>
 8 
 9                @if (count($navigation_item['children']) > 0)
10                    <div class="hidden group-hover:block bg-gray-200 mx-auto p-4">
11                        <ul class="list-none">
12                            @foreach($navigation_item['children'] as $child)
13                                <li class="relative">
14                                    <a href="{{ $child['link'] }}" class="text-sm">
15                                        {{ $child['name'] }}
16                                    </a>
17                                </li>
18                            @endforeach
19                        </ul>
20                    </div>
21                @endif
22            @endforeach
23        </ul>
24    @endisset
25</nav>