Layout

Here is a complete example of the layout component:

<x-layout>
    <x-slot:header>
        <x-layout.header>
            <x-slot:left>
                <span>Dashboard</span>
            </x-slot:left>
 
            <x-slot:middle>
                <x-input icon="magnifying-glass" placeholder="Search" sm />
            </x-slot:middle>
 
            <x-slot:right>
                <x-dropdown text="Hello, AJ!">
                    <x-slot:header>
                        <x-theme-switch block />
                    </x-slot:header>
                    <x-dropdown.items text="Profile" />
                    <x-dropdown.items text="Logout" />
                </x-dropdown>
            </x-slot:right>
        </x-layout.header>
    </x-slot:header>
 
    <x-slot:menu>
        <x-side-bar collapsible thin-scroll>
            <x-slot:brand>
                <div class="flex justify-center py-4">
                    <img src="{{ asset('logo.svg') }}" class="h-10 w-10" />
                </div>
            </x-slot:brand>
            <x-slot:brand-collapsed>
                <div class="flex justify-center py-4">
                    <img src="{{ asset('logo-icon.svg') }}" class="h-8 w-8" />
                </div>
            </x-slot:brand-collapsed>
 
            <x-side-bar.item text="Home" icon="home" route="#" current />
            <x-side-bar.item text="Notifications" icon="bell" route="#">
                <x-slot:badge>5</x-slot:badge>
            </x-side-bar.item>
            <x-side-bar.item text="Messages" icon="envelope" badge-color="blue" route="#">
                <x-slot:badge>3</x-slot:badge>
            </x-side-bar.item>
 
            <x-side-bar.separator text="Configurations" line />
 
            <x-side-bar.item text="Settings" icon="cog-6-tooth" opened>
                <x-side-bar.item text="General" route="#" />
                <x-side-bar.item text="Privacy" route="#" />
            </x-side-bar.item>
            <x-side-bar.item text="Account" icon="user">
                <x-side-bar.item text="Profile" route="#" />
                <x-side-bar.item text="API Keys" route="#" />
            </x-side-bar.item>
 
            <x-side-bar.separator text="Resources" line-right />
 
            <x-side-bar.item text="External Docs" icon="book-open" href="/" />
 
            <x-slot:footer>
                <p class="text-sm text-gray-500">v4.0.0</p>
            </x-slot:footer>
        </x-side-bar>
    </x-slot:menu>
 
    <h1>Welcome back, AJ!</h1>
    <p>A complete layout with header slots and a collapsible sidebar.</p>
</x-layout>

Before continuing, you may have noticed the following:

• The layout uses several slots: header and menu
• It is composed of child components: layout.header , side-bar , side-bar.item , and side-bar.separator
• The preview also uses other TallStackUI components: dropdown , input , and theme-switch

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

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

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

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

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>

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>

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.

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:

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>

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>

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>

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.

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" />

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.*" /> 

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>

A group has nothing to show on a collapsed sidebar: its items live in a list that only opens inline, and the rail has no room for it. Hovering, or clicking, for touch, a collapsed group now opens its items in a panel anchored beside the icon, headed by the group name.

It closes on leave, on click outside, on Escape, and when the sidebar is expanded again. Single items keep their tooltip; groups no longer show one, since the panel names itself.

A badge is the one thing on an item that carries information the icon cannot: a count of things waiting. Collapsing the sidebar used to drop it, so the compact mode was also the mode that hid what needed attention. It now degrades to a dot on the corner of the icon, in the color the badge was given.

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="Configuration" /> 
<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="Configuration" />
 
<!-- Line separator between text -->
<x-side-bar.separator text="Configuration" line />
 
<!-- Line separator at right -->
<x-side-bar.separator text="Configuration" line-right />