Laravel Dock Component

Pro

macOS-style dock with magnification effect for navigation and quick actions.

A Dock built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::dock>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Dock is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

{{-- Fixed dock at the bottom of the viewport --}}
<x-aura::dock :fixed="true">
    <x-aura::dock.item label="Home" href="/">
        <x-aura::icon name="home" size="md" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Dashboard" href="/dashboard">
        <x-aura::icon name="layout" size="md" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Messages" href="/messages">
        <x-aura::icon name="message-circle" size="md" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Settings" href="/settings">
        <x-aura::icon name="settings" size="md" />
    </x-aura::dock.item>
</x-aura::dock>

See the full API, props and live examples in the Dock documentation.

Props

Dock

Prop	Type	Default	Description
`position`	`string`	`'bottom'`	Dock placement: `bottom`, `top`, `left`, `right`.
`size`	`string`	`'md'`	Base icon size: `sm`, `md`, `lg`.
`magnify`	`bool`	`true`	Enable the macOS-style magnification effect on hover.
`fixed`	`bool`	`false`	Fix the dock to the viewport edge.

Dock Item

Prop	Type	Default	Description
`label`	`string`	`''`	Tooltip label shown on hover.
`href`	`string\|null`	`null`	URL the item links to. Renders as `<a>` when set, `<button>` otherwise.
`active`	`bool`	`false`	Marks the item as active with a dot indicator below the icon.