Horizontal layout

05 · Layout

Horizontal layout

A panel layout with a top menu. On wide screens the menu sits horizontally in the top bar; below lg it moves into a drawer that opens from the left. It is an alternative to the vertical layout for applications with a short menu.

acun:layout.horizontal

→ Open the horizontal layout as a full page

Basic usage

Build the top menu in the nav slot with acun:nav.horizontal-item and acun:nav.horizontal-group; the links inside groups are compact sub-items. Unlike the vertical layout, when the logo slot is given, the brand name is not shown separately; pass the logo and the name together in the slot.

BLADE

<acun:layout.horizontal :title="$title ?? null" brand-name="Acun Panel" :home-url="route('dashboard')">
    <acun:slot:head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </acun:slot:head>

    <acun:slot:nav>
        <acun:nav.horizontal-item :href="route('dashboard')" title="Home" :active="request()->routeIs('dashboard')" />
        <acun:nav.horizontal-group title="Customers" :active="request()->routeIs('customers.*')">
            <acun:nav.sub-item compact :href="route('customers.index')" title="Customer List" />
            <acun:nav.sub-item compact :href="route('customer-groups.index')" title="Customer Groups" />
        </acun:nav.horizontal-group>
    </acun:slot:nav>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Values
`brand-name`	Name next to the logo; defaults to config('app.name')
`home-url`	Link of the logo; defaults to url('/')
`title`	Tab title

Mobile menu

Below lg the horizontal menu is hidden and the menu button opens a drawer from the left. The drawer renders the mobileNav slot, or nav when that is not given; since horizontal items do not look good in the drawer, pass vertical menu items (acun:nav.item, acun:nav.group) here. The drawer title is set with drawer-title and its bottom with drawerFooter.

BLADE

<acun:layout.horizontal brand-name="Acun Panel" drawer-title="Menu">
    <acun:slot:nav>…</acun:slot:nav>

    <acun:slot:mobileNav>
        <acun:nav.item :href="route('dashboard')" title="Home" />
        <acun:nav.group title="Customers">
            <acun:nav.sub-item :href="route('customers.index')" title="Customer List" />
            <acun:nav.sub-item :href="route('customer-groups.index')" title="Customer Groups" />
        </acun:nav.group>
    </acun:slot:mobileNav>

    <acun:slot:drawerFooter>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <acun:button type="submit" variant="ghost" class="w-full">Log Out</acun:button>
        </form>
    </acun:slot:drawerFooter>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Values
`drawer-title`	Title of the drawer; defaults to brand-name

Top bar

To the right of the menu come, in order, search (only xl and up), actions, the theme toggle and userMenu. To remove the theme toggle, pass :theme-toggle="false".

BLADE

<acun:layout.horizontal brand-name="Acun Panel">
    <acun:slot:nav>…</acun:slot:nav>

    <acun:slot:search>
        <acun:command-palette :items="$searchItems" />
    </acun:slot:search>

    <acun:slot:userMenu>
        <acun:user-menu :name="auth()->user()->name">
            <acun:dropdown.item :href="route('profile.edit')" wire:navigate>Settings</acun:dropdown.item>
        </acun:user-menu>
    </acun:slot:userMenu>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Values
`theme-toggle`	true \| false

Preferences and customizer

Theme, primary color, the bordered look and saving preferences work as in the vertical layout. Since the horizontal layout has no sidebar, there is no sidebar-mode, navbar-mode or semi-dark; the customizer panel does not show the menu and top bar options either.

BLADE

<acun:layout.horizontal
    brand-name="Acun Panel"
    :theme="auth()->user()?->theme_preference"
    :brand-color="auth()->user()?->brand_color"
    :preference-url="route('ui-preference.update')"
    skin="bordered"
    customizer
>
    {{ $slot }}
</acun:layout.horizontal>

Prop	Values
`theme`	light \| dark \| system
`brand-color`	default \| green \| red \| yellow \| blue \| gray \| dark \| #rrggbb
`skin`	default \| bordered
`customizer`	true \| false

API

Props and slots

The values the component accepts.

Prop	Default	Description
`title`	`null`	Tab title; defaults to the application name
`brand-name`	`config('app.name')`	Brand name next to the logo (when there is no logo slot)
`home-url`	`url('/')`	Link of the logo
`drawer-title`	`null`	Title of the mobile drawer; defaults to brand-name
`theme-toggle`	`true`	Theme toggle in the top bar
`theme`	`null`	light · dark · system; when null, the preference in the browser
`brand-color`	`null`	default · green · red · yellow · blue · gray · dark · #rrggbb
`preference-url`	`null`	URL that the appearance preferences are POSTed to
`skin`	`null`	default · bordered
`customizer`	`false`	Appearance customizer on the right edge (without the menu options)
`stacked`	`false`	The menu sits on its own row below the logo, search and user menu; for long menus that do not fit on one row

Slots: head, logo, nav, mobileNav, search, actions, userMenu, drawerFooter, default (page content)