Layout

Layout component.

Layout, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->layout()
    ->block('block', 'classes');

Layout Header, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->layout('header')
    ->block('block', 'classes');

Sidebar, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->sideBar()
    ->block('block', 'classes');

Sidebar Item, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->sideBar('item')
    ->block('block', 'classes');

Sidebar Separator, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->sideBar('separator')
    ->block('block', 'classes');

# Concept

The TallStackUI layout component was introduced in version 2 for dashboard creation and has been enhanced in version 3 with features like a collapsible sidebar, collapsed branding, a sidebar footer slot, and item badges. While this component is simple, it is complete in every way. Due to the format of the TallStackUI documentation, there will be no code examples of the layout that makes it display.

# Layout Example

Here is a complete example of using the layout component:

<body>
 
    <x-layout> 
        <x-slot:header>
            <x-layout.header>
                <x-slot:right>
                    <x-dropdown text="Hello, {{ auth()->user()->name }}!">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <x-dropdown.items text="Logout" onclick="event.preventDefault(); this.closest('form').submit();" />
                        </form>
                    </x-dropdown>
                </x-slot:right>
            </x-layout.header>
        </x-slot:header>
 
        <x-slot:menu>
            <x-side-bar>
                <x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
                <x-side-bar.item text="Settings" icon="cog" :route="route('settings')" />
            </x-side-bar>
        </x-slot:menu>
 
        {{ $slot }}
    </x-layout>
 
    @livewireScripts
</body>

Before continuing, you may have noticed the following:

The layout component has multiple slots
The layout component has other components, such as layout.header
In this example, we are using other components from TallStackUI, such as dropdown

Layout Slots

# Slot: Header

This slot is used to position the component layout.header :

<x-slot:header>
    <x-layout.header>
        <!-- ... -->
    </x-layout.header>
</x-slot:header>

# Slot: Menu

This slot is used to position the comonent side-bar :

<x-slot:menu>
    <x-side-bar>
        <!-- ... -->
    </x-side-bar>
</x-slot:menu>

# Slot: Top

Although it was not used in the example above, this slot is positioned above the menu slot and was created to receive any content added in this position. Internally it is applied like this:

<div x-data="{ tallStackUiMenuMobile : false }" x-on:tallstackui-menu-mobile.window="tallStackUiMenuMobile = $event.detail.status">
    @if ($top) 
        {{ $top }}
    @endif
    @if ($menu)
        {{ $menu }}
    @endif
 
    <!-- ... -->
</div>

# Slot: Footer

Same as top , but positioned in the bottom of the layout component:

<div x-data="{ tallStackUiMenuMobile : false }" x-on:tallstackui-menu-mobile.window="tallStackUiMenuMobile = $event.detail.status">
    <!-- ... -->
 
    @if ($footer) 
        {{ $footer }}
    @endif
</div>

Children Components

# Layout Header

The layout.header component is used to group three specific slots that vary the positions of content in the top horizontal bar, called the header.

<x-layout.header>
    <x-slot:left>
        <!-- ... -->
    </x-slot:left>
 
    <x-slot:middle>
        <!-- ... -->
    </x-slot:middle>
 
    <x-slot:right>
        <!-- ... -->
    </x-slot:right>
</x-layout.header>

left : adds content to the left of the horizontal bar
middle : adds content to the middle of the horizontal bar
right : adds content to the right of the horizontal bar

Additionally, you can control the display of a button that opens the side-bar on mobile devices. You will learn more about this as you continue reading the documentation below.

# Side Bar

The side-bar is the component that creates the structure to receive the options menu. It is unique between the desktop and mobile versions, which means that the same options menu you see on the desktop will be the same as the one you see on the mobile version.

<x-side-bar>
    <!-- ... -->
</x-side-bar>

Since the side-bar is applied to both desktop and mobile, if for some reason you do not want to use the menu for mobile devices, you can hide the button that is displayed in the layout.header so that when clicked it activates the side-bar on mobile:

<x-layout.header without-mobile-button>
    <!-- ... -->
</x-layout.header>

If you hide the default side-bar opening button on mobile, but want to use another button to control the side-bar opening on mobile, just trigger AlpineJS events:

<!-- Opening -->
<button x-on:click="$dispatch('tallstackui-menu-mobile', { status : true })">
    Open Mobile
</button>
 
<!-- Closing -->
<button x-on:click="$dispatch('tallstackui-menu-mobile', { status : false })">
    Close Mobile
</button>

The side-bar has few settings available, but they are all useful for a purpose:

Slot: brand : special slot for adding an image/text above the options menu
Slot: brand-collapsed : compact branding shown when the collapsible sidebar is collapsed
Slot: footer : content pinned to the bottom of the sidebar
Attribute: smart : enable route detection behavior to enable the "current" routes effect
Attribute: navigate : enable wire:navigate routes
Attribute: navigate-hover : enable wire:navigate.hover routes
Attribute: thin-scroll : enable soft-scrollbar in the side bar
Attribute: thick-scroll : enable custom-scrollbar in the side bar
Attribute: collapsible : enable collapsible behavior to the sidebar

The collapsible will work properly if all of your items have icons and you don't use three levels of items.

Example:

<x-side-bar smart navigate thin-scroll collapsible>
    <x-slot:brand>
        <div class="flex justify-center">
            <img src="..." />
        </div>
    </x-slot:brand>
 
    <!-- side-bar items goes here... -->
</x-side-bar>

# Brand Collapsed

When using the collapsible attribute, you can provide a brand-collapsed slot to display a compact version of your branding when the sidebar is collapsed. This is useful for showing an icon instead of a full logo:

<x-side-bar collapsible>
    <x-slot:brand>
        <div class="flex justify-center">
            <img src="/logo-full.svg" class="h-8" />
        </div>
    </x-slot:brand>
    <x-slot:brand-collapsed> 
        <div class="flex justify-center">
            <img src="/logo-icon.svg" class="h-6" />
        </div>
    </x-slot:brand-collapsed>
 
    <!-- side-bar items goes here... -->
</x-side-bar>

# Side Bar Footer

The footer slot allows you to pin content to the bottom of the sidebar, such as version information or user profile links:

<x-side-bar>
    <!-- side-bar items goes here... -->
 
    <x-slot:footer> 
        <p class="text-sm text-gray-500">v3.0.0</p>
    </x-slot:footer>
</x-side-bar>

# Side Bar Item

The side-bar.item component is used to add clickable options to the side-bar . It can be used to add an individual item or create a group of items.

<!-- Individual -->
<x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
 
<!-- Grouped -->
<x-side-bar.item text="Admin">
    <x-side-bar.item text="Home" icon="home" :route="route('admin.dashboard')" />
</x-side-bar.item>

If you don't want to use the side-bar component's smart to activate automatic route detection, you can control the route detection behavior manually, through the boolean attributes: opened - for the group of items, and current for the item itself:

<x-side-bar.item text="Admin" opened>
    <x-side-bar.item text="Home" icon="home" current :route="route('admin.dashboard')" />
</x-side-bar.item>

These attributes are boolean, which means you can pass conditions to them:

<x-side-bar.item text="Admin" :opened="route()->requestIs('admin.*')">
    <x-side-bar.item text="Home"
                     icon="home"
                     :current="route()->requestIs('admin.dashboard')"
                     :route="route('admin.dashboard')" />
</x-side-bar.item>

Additionally, you can use visible attribute to hide the item.

<x-side-bar.item text="Admin" :visible="true">
    <x-side-bar.item text="Home" icon="home" current :route="route('admin.dashboard')" />
</x-side-bar.item>
 
<!-- Or -->
 
<x-side-bar.item text="Home"
                 icon="home"
                 :route="route('admin.dashboard')"
                 :visible="fn () => true" />

As demonstrated above, the visible accepts boolean values and closures to be evaluated using Laravel's value helper function.

# Href Attribute

By default, sidebar items use the route attribute which integrates with smart route matching and wire:navigate . If you need to link to an external URL or bypass route matching entirely, use the href attribute instead:

<!-- Using named route (supports smart matching + wire:navigate) -->
<x-side-bar.item text="Dashboard" icon="home" :route="route('dashboard')" />
 
<!-- Using raw href (bypasses route matching and wire:navigate) -->
<x-side-bar.item text="External Docs" icon="book-open" href="https://docs.example.com" />

# Match Attribute

The match attribute provides a flexible way to control the active state of a sidebar item using a route name pattern. This is useful when you want an item to appear active across multiple related routes:

<x-side-bar.item text="Orders"
                 icon="shopping-cart"
                 :route="route('orders.index')"
                 match="orders.*" />

# Badge

Sidebar items support a badge slot to display notification counts or labels. You can customize the badge color using the badge-color attribute:

<x-side-bar.item text="Notifications" icon="bell" :route="route('notifications')">
    <x-slot:badge>5</x-slot:badge> 
</x-side-bar.item>
 
<!-- Custom badge color -->
<x-side-bar.item text="Messages" icon="envelope" badge-color="blue" :route="route('messages')"> 
    <x-slot:badge>3</x-slot:badge>
</x-side-bar.item>

# Side Bar Separator

The side-bar.separator is a component used to create decorated separations between items:

<x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
<x-side-bar.separator text="Configurations" /> 
<x-side-bar.item text="Settings" icon="cog" :route="route('settings')" />

There are three different options available. Each offers a unique style:

<!-- Default, only text -->
<x-side-bar.separator text="Configurations" />
 
<!-- Line separator between text -->
<x-side-bar.separator text="Configurations" line />
 
<!-- Line separator at right -->
<x-side-bar.separator text="Configurations" line-right />

# Disable Layout Components

If for some reason you do not want to use the layout components - the main component and its child components, you can set the environment variable TALLSTACKUI_AVOID_LAYOUT_REGISTRATION to true to achieve this behavior without having to publish the configuration file and comment out the components - which would also be a valid measure, but less practical.

# Customization

All the components mentioned above are available to be fully customized through one of the TallStackUI customization methods: soft customization or deep customization.