When merged this PR adds support for Bootstrap 4.

We added 3 new methods for the Menu class:

• setTagName enables using another element as an <ul>
• setWrapLinksInList can disable automatic the wrapping of links in <li>'s
• setActiveClassOnLink can set the activeClass on the link instead of the <li>

To set the active class on the link we assume that the item supplied to renderItem implements HasHtmlAttributes. I think it is pretty safe to do so, but to be safe we added a check to see if the item implements HasHtmlAttributes.

The syntax to render a Bootstrap 4 menu looks like this:

$submenu = Menu::new()
    ->setTagName('div')
    ->addClass('dropdown-menu')
    ->setWrapLinksInList(false)
    ->setActiveClassOnLink(true)
    ->add(Link::to('/about', 'About')->addParentClass('nav-item')->addClass('dropdown-item'));

Menu::new()
    ->addClass('navbar-nav')
    ->add(Link::to('/', 'Home')->addParentClass('nav-item')->addClass('nav-link'))
    ->submenu(Link::to('#', 'Dropdown link')->addClass('nav-link dropdown-toggle')->setAttribute('data-toggle', 'dropdown'), $submenu->addParentClass('nav-item dropdown'))
    ->setActive(function (Link $link) {
        return $link->url() === '/about';
    })->render();

Resolves #40

I chose to call the helper method in Menu.php empty(). That can be confusing but I thought you'd like the lower case trend in your methods. If you want, I can change it to emptyItem().

When I using submenu() function to create submenu, I need to add class to li like:

<ul>
  <li><a href="#">Home</a></li>
  <li class="submenu">
    <a href="#">Submenu</a>
    <ul>...</ul>
  </li>
</ul>

Hi neighbours (I'm dutch hehe :)),

I wonder if this library supports ordering items after they have been added.

My usecase: through different ServiceProviders I'd like to add links after another specific link.

I couldn't manage this one yet, hopefuly there is a possibility to make this work!

Regards, Bob

When adding an "item class" on an instance of \Spatie\Menu\Menu via addItemClass(), it's possible for menus and links to have the "item class" applied. Since the \Spatie\Menu\Menu class also implements \Spatie\Menu\HasHtmlAttributes interface, all links as well as submenus get the applied class.

I hope this is an easy fix. I have no idea where to search for a solution at this time.

->submenu(
    Link::to('#', 'Contacts')
        ->addClass('btn btn-outline dropdown-toggle mr-2')
        ->setAttributes(['data-toggle' => 'dropdown', 'role' => 'button']),
        Menu::new()
            ->addClass('dropdown-menu')
            ->route('admin.customer.index', 'Customers')
            ->route('admin.supplier.index', 'Suppliers')
            ->wrap('div', ['class' => 'dropdown'])
            ->setActiveClassOnLink()
            ->setActiveFromRequest()
            ->each(function (Link $link) {
                $link->addClass('dropdown-item');
            })
)

This is generates the following menu:

<div class="dropdown">
  <a href="#" data-toggle="dropdown" role="button" class="btn btn-outline dropdown-toggle mr-2">Contacts</a>
  <ul class="dropdown-menu active">
    <li class="active exact-active"><a href="/admin/customers" class="dropdown-item active exact-active">Customers</a></li>
    <li><a href="/admin/suppliers" class="dropdown-item">Suppliers</a></li>
  </ul>
</div>

But no matter what I try, I can't get the Contacts link (with href="#") to become active.

I have tried changing the url structure of /admin/customers and /admin/suppliers to /admin/contacts/customers and /admin/contacts/suppliers and changed # to /admin/contacts, but that didn't work.

I also tried things with addParentClass but because it isn't a parent, that doesn't work.

What am I doing wrong or what am I missing?

Menus are something very special, like nearly all frontend/display things. There are some common structures that cover ~90% but in all other cases I have to override the Menu and can Just have one render style.

If I think about dashboards you have one sidebar menu, one in the top navbar and one in the footer.

With a dedicated render class that would be a lot easier.

$menu = new Menu(); // create the menu with items
$menu->render(); // default one
$menu->render('bootstrap-3'); // bootstrap3 renderer
$menu->render('dropdown'); // dropdown renderer

This would be easy achievable by an Interface for renderers and the manager-driver approach that's massively used in laravel. By this it would be possible to create ready to use renderers in foreign packages and just register them.

It will also help to remove addClass for all items if all need .item. And enable icons in the menu and to add bootstrap .caret and all the other stuffs.

I would be fine to create a PR for this, just want to know if it is wanted and the way to solve the Problem ist ok!?

Related to:

• #28
• #39

Hello,

I have a problem where my active menu item is not being set properly

this is my menu on http://localhost/geofence/assign :

this is my routes

| URI                                                       | Name                 |
| geofence                                                  | geofence.index       |
| geofence/assign                                           | geofence.assign      |
| geofence/show                                             | geofence.show        |

this my code

$this->createSubMenu('Geofence', 'fa fa-globe')
              ->routeIfCan(['view', Geofence::class],'geofence.index','<i class="fa fa-pencil-square-o"></i> <span>CRUD</span></a>')
              ->route('geofence.assign','<i class="fa fa-street-view"></i> <span>Assign</span></a>')
              ->route('geofence.show','<i class="fa fa-list"></i> <span>Contacts List</span></a>')
              ->setActiveFromRequest();

protected function createSubMenu($text = '', $iconClass =''){
    return Menu::new()->wrap('li', ['class' => 'treeview'])
              ->prepend('
                <a href="#">
                  <i class="'.$iconClass.'"></i>
                  <span>'. $text .'</span>
                  <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                  </span>
                </a>
              ')
              ->addClass('treeview-menu');
}

Under "Determining the Active Items with a URL" the docs state:

Mixing absolute and relative url's isn't an issue either.

However I am finding that not to be the case. I am working on a CodeIgniter 4 adaptation of this library and I am initializing the instance to what the framework knows as the current and base URLs. The problem is that choosing the absolute/relative path forces the implementor into using the same.

This PR adds two tests which demonstrate the issue. I would be willing to dig into the source and try to find a fix, but want to make sure these failures are indeed "bugs" before putting work into it.

Note: I worked on this in v2 locally but the issue is happening against master as well in my Github Actions for PHP 8.

A parent menu entry of a submenu does not get marked as active properly. This is most likely due to a wrong argument order in ActiveUrlChecker.php line 42:

...
// If this url starts with the url we're matching with, it's active.
        if ($matchPath === $itemPath || Str::startsWith($matchPath, $itemPath)) {
            return true;
        }
...

should be

...
// If this url starts with the url we're matching with, it's active.
        if ($matchPath === $itemPath || Str::startsWith($itemPath, $matchPath)) {
            return true;
        }
...

$menu_a = Menu::new() ->link( '#', 'SubMenu Item 1' ) ->link( '#', 'SubMenu Item 2' ) ->link( '#', 'SubMenu Item 3' ) ->wrap( 'div', ['class' => 'someclass'] );

$menu = Menu::new() ->link( '#', 'Menu Item 1' ) ->link( '#', 'Menu Item 2' ) ->submenu( Link::to( '#', 'Menu Item 3' ), $menu_a );

echo $menu->render();

Outputs

<ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li>
        <div class="someclass"><a href="#">Menu Item 3</a>
            <ul>
                <li><a href="#">SubMenu Item 1</a></li>
                <li><a href="#">SubMenu Item 2</a></li>
                <li><a href="#">SubMenu Item 3</a></li>
            </ul>
        </div>
    </li>
</ul>

Should Output

<ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li>
        <a href="#">Menu Item 3</a>
        <div class="someclass">
            <ul>
                <li><a href="#">SubMenu Item 1</a></li>
                <li><a href="#">SubMenu Item 2</a></li>
                <li><a href="#">SubMenu Item 3</a></li>
            </ul>
        </div>
    </li>
</ul>