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 = [])

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

namespace App\MoonShine\Layouts;
 
use MoonShine\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