Allow MenuSection to be an external link

[dmason30]

In Nova 3 I used tools to display items on the menu with icons these were external links to their relevant dashboards.

In Nova 4 we can easily add tools using the menu() method on our Tool classes however, to replicate the above behaviour of displaying it as an a external link at the moment the only Menu class that supports external links is MenuItem but you cannot

App\Nova\Tools\InboxTool.php

public function menu() {
    return MenuItem::externalLink('Horizon', route('horizon'))
}

Displays in the menu like this

Proposed
Allow MenuSection to be an externalLink:

public function menu() {
    return MenuSection::externalLink('Horizon', route('horizon'))
         ->icon('sun')
}

Which would display like this and open in a new tab when clicked

Workaround
This works in displaying correctly but instead of opening a new tab it opens the url in an overlay over the portal which is cool but would much prefer opening in a new tab!

public function menu(Request $request)
{
    return MenuSection::make('Horizon')
        ->path(URL::remote(route('horizon')))
        ->icon('sun');
}

[sanderbaas]

I ended up using this ugly workaround where I replace the menu-item with an imposter which is just a regular link.

NovaServiceProvider.php

public function boot()
{
    parent::boot();

    Nova::script('nova-custom', 'js/nova/custom.js');
}

custom.js

document.addEventListener("DOMContentLoaded", () => {
    document.getElementsByClassName('sidebar-section-title').forEach((item) => {
        if (item.href.search('/nova') === 0) {
            return;
        }

        let newItem = Object.assign(
            document.createElement('a'),
            {
                classList: item.className,
                innerHTML: item.innerHTML,
                href: item.href
            }
        );

        item.parentNode.replaceChild(newItem, item);
    });
});

[NEKKAH-RABAH]

I have the same issue here, I am still wondering why they didn't add an external link on Menu Section, this work-around does not work as I was expecting, there for, I'm going to do the same thing as @sanderbaas I didn't find better way to do it.

public function menu(Request $request) { return MenuSection::make('Horizon') ->path(URL::remote(route('horizon'))) ->icon('sun'); }

[NEKKAH-RABAH]

Finally, I created a MenuSection and used the MenuItem externalLink function and it works well but I hope that they will add external links on the MenuSection

[guiribmedeiros]

Can you share your solution?
I am kinda struggling with that here 😅

[flatcapco]

I would like to do the same as i have 2 external tools with major functionality and they feel like a 2nd class citizen when they cant be added bold, larger and with an icon in the sidebar

[jolora]

Yeah this is an annoying oversight in the menu tools... I can't see any reason why we shouldn't be able to add ->externalLink to a MenuSection.

[clementmas]

I'm facing the same issue and found a CSS only workaround based on this StackOverflow answer:

NovaServiceProvider.php

public function boot()
{
    parent::boot();

    Nova::style('custom-nova', public_path('css/custom-nova.css'));

    Nova::mainMenu(function (Request $request) {
        return [
            Menu\MenuItem::externalLink('Back to app', route('app')),
            // ...
        ];
    });
}

custom-nova-theme.css

.sidebar-menu > div:first-child > a > span:first-child::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgb(100, 116, 139)' width='24' height='24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'%3E%3C/path%3E%3C/svg%3E");
}
.sidebar-menu > div:first-child > a span {
    font-size: 16px;
}

Please Nova team, allow external links on MenuSection to prevent us from adding complexity into our apps.