Components

System component TopBar

Make

The TopBar system component is used to create the top navigation bar in MoonShine.

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

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

As a parameter, method make() takes an array with components.

namespace App\MoonShine; use MoonShine\Components\Layout\LayoutBlock; use MoonShine\Components\Layout\LayoutBuilder; use MoonShine\Components\Layout\Menu; use MoonShine\Components\Layout\Profile; use MoonShine\Components\Layout\TopBar; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ TopBar::make([ Menu::make()->top() ]), //... ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\LayoutBlock;
use MoonShine\Components\Layout\LayoutBuilder;
use MoonShine\Components\Layout\Menu;
use MoonShine\Components\Layout\Profile;
use MoonShine\Components\Layout\TopBar;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            TopBar::make([
                Menu::make()->top()
            ]),
 
            //...
        ]);
    }
}

topbar topbar_dark

Actions

Method actions() of the TopBar component allows you to add additional elements to the actions areas. The method takes an array of components as a parameter.

namespace App\MoonShine; use MoonShine\Components\Layout\LayoutBlock; use MoonShine\Components\Layout\LayoutBuilder; use MoonShine\Components\Layout\Menu; use MoonShine\Components\Layout\Profile; use MoonShine\Components\Layout\TopBar; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ TopBar::make([ Menu::make()->top(), ]) ->actions([ When::make( static fn() => config('moonshine.auth.enable', true), static fn() => [Profile::make()] ) ]), //... ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\LayoutBlock;
use MoonShine\Components\Layout\LayoutBuilder;
use MoonShine\Components\Layout\Menu;
use MoonShine\Components\Layout\Profile;
use MoonShine\Components\Layout\TopBar;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            TopBar::make([
                Menu::make()->top(),
            ])
                ->actions([
                    When::make(
                        static fn() => config('moonshine.auth.enable', true),
                        static fn() => [Profile::make()]
                    )
                ]),
 
            //...
        ]);
    }
}

topbar_actions topbar_actions_dark

Hide logo

The hideLogo() method allows you to hide the logo.

hideLogo() 
hideLogo()
namespace App\MoonShine; use MoonShine\Components\Layout\LayoutBlock; use MoonShine\Components\Layout\LayoutBuilder; use MoonShine\Components\Layout\Menu; use MoonShine\Components\Layout\Profile; use MoonShine\Components\Layout\TopBar; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ TopBar::make([ Menu::make()->top(), ]) ->hideLogo(), //... ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\LayoutBlock;
use MoonShine\Components\Layout\LayoutBuilder;
use MoonShine\Components\Layout\Menu;
use MoonShine\Components\Layout\Profile;
use MoonShine\Components\Layout\TopBar;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            TopBar::make([
                Menu::make()->top(),
            ])
                ->hideLogo(),
 
            //...
        ]);
    }
}

Hide theme switcher

The hideSwitcher() method allows you to hide the theme switcher.

hideSwitcher() 
hideSwitcher()
namespace App\MoonShine; use MoonShine\Components\Layout\LayoutBlock; use MoonShine\Components\Layout\LayoutBuilder; use MoonShine\Components\Layout\Menu; use MoonShine\Components\Layout\Profile; use MoonShine\Components\Layout\TopBar; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ TopBar::make([ Menu::make()->top(), ]) ->hideSwitcher(), //... ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\LayoutBlock;
use MoonShine\Components\Layout\LayoutBuilder;
use MoonShine\Components\Layout\Menu;
use MoonShine\Components\Layout\Profile;
use MoonShine\Components\Layout\TopBar;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            TopBar::make([
                Menu::make()->top(),
            ])
                ->hideSwitcher(),
 
            //...
        ]);
    }
}