Components

TopBar

Basics

The TopBar component is used to create a top navigation panel in MoonShine.

You can create a TopBar using the static method make() of the TopBar class.

make(iterable $components = []) 
make(iterable $components = [])

The make() method takes an array of components as a parameter.

namespace App\MoonShine\Layouts;use MoonShine\UI\Components\Layout\Menu;use MoonShine\UI\Components\Layout\TopBar;final class MoonShineLayout extends AppLayout{ public function build(): Layout { return Layout::make([ // .. TopBar::make([ Menu::make()->top() ]), // ... ]); }}
namespace App\MoonShine\Layouts;
 
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\Layout\TopBar;
 
final class MoonShineLayout extends AppLayout
{
    public function build(): Layout
    {
        return Layout::make([
            // ..
 
            TopBar::make([
                Menu::make()->top()
            ]),
 
            // ...
        ]);
    }
}
<x-moonshine::layout.top-bar>
<x-moonshine::layout.menu :elements="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Section', 'url' => '/section']]"/>
</x-moonshine::layout.top-bar>

topbar topbar_dark