Introduction

On this page, you'll see [Tenant] and [tenant] used. It's simply referring to the site you're working on. Also, please note the case in the examples as that is also relevant.

Adding a new menu to use in your templates is quite straightforward in Strata. They're defined in app/Menus/[Tenant]/[MenuName].php.

By default, Strata ships with one Main menu out of the box, which you can see at https://[tenant]/admin/menus.

The Main is represented by the Main.php file you'll see if you visit the folder structure shown above. You can create a new navigation by creating a new menu class.

Let's build a Menu

To begin, navigate to app/Menus/[tenant] and create a new file that describes what your new navigation is for. (e.g., in this case, we're going to call it Side.php).

Tip: Because the Side.php file resides in the Menus directory, there is no need to make the filename overly specific. Try to avoid things like SecondaryMenu.php or SideMenu.php as the file structure tells us what the intent of the file is.

You may reference the existing Main.php to get a good starting point for what you might need to build out your class. Your newly created Menu class should look similar to this:

 1// Side.php
 2 
 3<?php
 4 
 5namespace App\Menus\[Tenant];
 6 
 7use Helix\Lego\Menus\Menu;
 8use App\Menus\HelixSleep\Elements\TopLevelLink;
 9use App\Menus\HelixSleep\Elements\TopLevelLinkWithFlyout;
10 
11class Side extends Menu
12{
13    protected static array $topLevel = [
14        TopLevelLink::class,
15        TopLevelLinkWithFlyout::class,
16    ];
17 
18    public function render()
19    {
20        return view('[tenant].menus.side');
21    }
22}

Note: Make sure your class name matches your filename. e.g. class Side... (line 11) matches Side.php

Before we talk about the protected static array $topLevel method, let's first skip ahead and talk about the render() function. The render() function simply returns the view this specific menu should render. Based on our current example, this blade file should live in resources/views/[tenant]/menus/side.blade.php. Keep in mind, since this is Laravel, the view() method in the render() function starts from resources/views by default. Thus, your render function would look like

1public function render()
2    {
3        return view('[tenant].menus.side'); 
4    }

Which would reference resources/views/[tenant]/menus/side.blade.php.

Now, the protected static array $topLevel method.

1protected static array $topLevel = [
2    TopLevelLink::class,
3    TopLevelLinkWithFlyout::class,
4];

This allows you to define the components you want to use for different menu item types. For example, the TopLevelLink::class is one potential type of link your Menu can support. Below is an example of what the TopLevelLink class might look like.

 1// TopLevelLink.php
 2 
 3<?php
 4 
 5namespace App\Menus\HelixSleep\Elements;
 6 
 7use Illuminate\View\View;
 8use Helix\Lego\Menus\Link;
 9 
10class TopLevelLink extends Link
11{
12    protected static array $siblings = [
13        // Add Sibling classes here
14    ];
15 
16    public static function name() : string
17    {
18        return 'Link';
19    }
20 
21    public function render(string $variant) : View
22    {
23        $variant = $variant ?: 'desktop';
24 
25        return view("[tenant].menus.elements.{$variant}.toplevel-link", [
26            'url' => $this->url,
27            'title' => $this->title,
28        ]);
29    }
30}

For the moment, we're only going to focus on the render() function. Just like our Side.php class, the render() function tells our Menu what view file to render. However, this time, we're allowed to pass the view some useful data. In this case, url and title.

Note: url and title come from the Helix\Lego\Menus\Link class. So, you can always extend it should you want to include more data.

1return view("[tenant].menus.elements.{$variant}.toplevel-link", [
2    'url' => $this->url,
3    'title' => $this->title,
4]);

Notice the toplevel-link reference at the end of the view() line. That is our blade view, which will have access to url and title because we passed it in. Simply reference them like any other Laravel variable, {{ $url }} or {{ $title }}.

A very simple toplevel-link.blade.php might look something like this:

1// toplevel-link.blade.php
2 
3<a href="{{ $url }}" class="uppercase font-bold text-sm no-underline">
4    {{ $title }}
5</a>

You can make any kind of nav item you'd like. A button that shows dropdowns on hover, a regular HREF as demonstrated, etc.

How to get Strata to recognize your Menu

Once you've done the steps above, you'll need to do one more thing to get your new nav into your tenant. From a terminal, at the root of your application, run php artisan lego:install --installers=InstallSiteMenus This command with the --installers=InstallSiteMenus flag will only worry about building out any new menus that are found.

TODO: Add more information pertaining to the granularity of menus.