Skip to content

Overview

Aura Filament v2.3 introduces the LayoutMode enum, letting you choose between two layout structures for your admin panel:

  • LayoutMode::Default — Filament's standard topbar-first layout. The topbar spans the full width of the viewport and the sidebar sits beneath it.
  • LayoutMode::SidebarFirst — A Notion/Linear-style layout where the sidebar spans the full height of the viewport and the topbar sits to its right.

Both layouts are driven by pure CSS — no Blade overrides, no JavaScript.

Usage

Pass the desired mode to ->layout() on the plugin:

use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use BlueStarSystem\AuraFilament\Enums\LayoutMode;
use BlueStarSystem\AuraFilament\Enums\Preset;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            AuraFilamentPlugin::make()
                ->preset(Preset::Glass)
                ->layout(LayoutMode::SidebarFirst)
        );
}

If you never call ->layout(), Default is used.

LayoutMode::Default

Filament's stock layout. The topbar spans the full viewport width, the sidebar drops beneath it, and the page content fills the remaining space.

Use this when:

  • You want a traditional admin dashboard feel.
  • Your app has a prominent global search or brand bar that should always be fully visible.

LayoutMode::SidebarFirst

The sidebar spans the full height of the viewport, starting at the very top of the window. The topbar is pushed to the right of the sidebar and only spans the content area width.

->layout(LayoutMode::SidebarFirst)

Use this when:

  • You want the Notion/Linear/Height aesthetic.
  • Vertical real estate matters (long navigation menus, nested groups).
  • The brand should live inside the sidebar, not above everything.

Primary-color safety

In SidebarFirst mode, the sidebar background is tinted with your primary color. For legibility across any primary (including amber, yellow, lime), Aura Filament automatically:

  • Forces the brand logo text to white.
  • Overrides primary-200 sidebar nav item text to white.

You get consistent contrast no matter which Color::* you pass to ->primaryColor().

Switching at runtime

The layout is rendered entirely via CSS attribute selectors, so you can switch without rebuilding assets. Simply change the enum value and reload the panel.

If you're using the theme configurator, layout mode is not yet user-configurable — it's set by the developer at panel-registration time. Reach out if you'd like this exposed to end users.