Navigation order - mixing groups and items

I know a variety of similar questions have been asked and Ive read them but I think Im trying the selected answer and not getting the suggested response. Im trying to make a custom menu so that i have 3 navigation items going to urls, then a group (My Account) and then 2 further Navigation items to log out and to go back to a previous website. A cut down version of my requirements is basically like this

     ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->item(
                    NavigationItem::make('Dashboard')
                        ->icon('heroicon-o-home')
                        ->sort(1)
                        ->url(fn (): string => Dashboard::getUrl()),

                )
                ->group(NavigationGroup::make('My Group')
                    ->items([
                        NavigationItem::make('Other Item')->url('/other')
                        ->sort(2),
                    ])
                )
                ->item(
                    NavigationItem::make('Item 2')
                        ->icon('heroicon-o-home')
                        ->sort(3)
                        ->url("/item-2"),

                );
            })

     ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->item(
                    NavigationItem::make('Dashboard')
                        ->icon('heroicon-o-home')
                        ->sort(1)
                        ->url(fn (): string => Dashboard::getUrl()),

                )
                ->group(NavigationGroup::make('My Group')
                    ->items([
                        NavigationItem::make('Other Item')->url('/other')
                        ->sort(2),
                    ])
                )
                ->item(
                    NavigationItem::make('Item 2')
                        ->icon('heroicon-o-home')
                        ->sort(3)
                        ->url("/item-2"),

                );
            })

However what I get is Dashboard, Item 2 and then the group. Is there something I'm doing wrong ? Thanks for any pointers

Solution

one off items are put into their own 'group' and prepended to the navigation collection, but you should be able to achieve what you want with this (but the spacing might be weird, but should be adjustable with some custom CSS):

->navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->item(
            NavigationItem::make('Dashboard')
                ->icon('heroicon-o-home')
                ->url('/'),
        )
        ->group(NavigationGroup::make('My Group')
            ->items([
                NavigationItem::make('Other Item')->url('/other')
                    ->sort(2),
            ])
        )
        ->group(NavigationGroup::make()
            ->items([
                NavigationItem::make('Item 2')
                    ->icon('heroicon-o-home')
                    ->url("/item-2"),
                NavigationItem::make('Item 3')
                    ->icon('heroicon-o-home')
                    ->url("/item-3"),
            ])
        );
})

->navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->item(
            NavigationItem::make('Dashboard')
                ->icon('heroicon-o-home')
                ->url('/'),
        )
        ->group(NavigationGroup::make('My Group')
            ->items([
                NavigationItem::make('Other Item')->url('/other')
                    ->sort(2),
            ])
        )
        ->group(NavigationGroup::make()
            ->items([
                NavigationItem::make('Item 2')
                    ->icon('heroicon-o-home')
                    ->url("/item-2"),
                NavigationItem::make('Item 3')
                    ->icon('heroicon-o-home')
                    ->url("/item-3"),
            ])
        );
})

Jump to solution

Navigation order - mixing groups and items

     ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->item(
                    NavigationItem::make('Dashboard')
                        ->icon('heroicon-o-home')
                        ->sort(1)
                        ->url(fn (): string => Dashboard::getUrl()),

                )
                ->group(NavigationGroup::make('My Group')
                    ->items([
                        NavigationItem::make('Other Item')->url('/other')
                        ->sort(2),
                    ])
                )
                ->item(
                    NavigationItem::make('Item 2')
                        ->icon('heroicon-o-home')
                        ->sort(3)
                        ->url("/item-2"),

                );
            })

     ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->item(
                    NavigationItem::make('Dashboard')
                        ->icon('heroicon-o-home')
                        ->sort(1)
                        ->url(fn (): string => Dashboard::getUrl()),

                )
                ->group(NavigationGroup::make('My Group')
                    ->items([
                        NavigationItem::make('Other Item')->url('/other')
                        ->sort(2),
                    ])
                )
                ->item(
                    NavigationItem::make('Item 2')
                        ->icon('heroicon-o-home')
                        ->sort(3)
                        ->url("/item-2"),

                );
            })

However what I get is Dashboard, Item 2 and then the group. Is there something I'm doing wrong ? Thanks for any pointers

Solution

->navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->item(
            NavigationItem::make('Dashboard')
                ->icon('heroicon-o-home')
                ->url('/'),
        )
        ->group(NavigationGroup::make('My Group')
            ->items([
                NavigationItem::make('Other Item')->url('/other')
                    ->sort(2),
            ])
        )
        ->group(NavigationGroup::make()
            ->items([
                NavigationItem::make('Item 2')
                    ->icon('heroicon-o-home')
                    ->url("/item-2"),
                NavigationItem::make('Item 3')
                    ->icon('heroicon-o-home')
                    ->url("/item-3"),
            ])
        );
})

->navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->item(
            NavigationItem::make('Dashboard')
                ->icon('heroicon-o-home')
                ->url('/'),
        )
        ->group(NavigationGroup::make('My Group')
            ->items([
                NavigationItem::make('Other Item')->url('/other')
                    ->sort(2),
            ])
        )
        ->group(NavigationGroup::make()
            ->items([
                NavigationItem::make('Item 2')
                    ->icon('heroicon-o-home')
                    ->url("/item-2"),
                NavigationItem::make('Item 3')
                    ->icon('heroicon-o-home')
                    ->url("/item-3"),
            ])
        );
})

Jump to solution

Navigation order - mixing groups and items

Navigation order - mixing groups and items

Similar Threads

Similar Threads

Similar Threads