Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add dock

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

Basic Usage

<div class="flex justify-center py-8">
    <x-aura::dock>
        <x-aura::dock.item label="Home">
            <x-aura::icon name="home" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Dashboard">
            <x-aura::icon name="layout" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Messages">
            <x-aura::icon name="message-circle" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Settings">
            <x-aura::icon name="settings" size="md" />
        </x-aura::dock.item>
    </x-aura::dock>
</div>
{{-- 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>

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.

Examples

Bottom Dock with Active Item

<div class="flex justify-center py-8">
    <x-aura::dock size="md">
        <x-aura::dock.item label="Home" :active="true">
            <x-aura::icon name="home" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Search">
            <x-aura::icon name="search" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Notifications">
            <x-aura::icon name="bell" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Profile">
            <x-aura::icon name="user" size="md" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Settings">
            <x-aura::icon name="settings" size="md" />
        </x-aura::dock.item>
    </x-aura::dock>
</div>
<x-aura::dock :fixed="true" size="md">
    <x-aura::dock.item label="Home" href="/" :active="true">
        <x-aura::icon name="home" size="md" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Search" href="/search">
        <x-aura::icon name="search" size="md" />
    </x-aura::dock.item>
    <!-- ... -->
</x-aura::dock>

No Magnification

<div class="flex justify-center py-8">
    <x-aura::dock size="lg" :magnify="false">
        <x-aura::dock.item label="Files">
            <x-aura::icon name="folder" size="lg" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Photos" :active="true">
            <x-aura::icon name="image" size="lg" />
        </x-aura::dock.item>
        <x-aura::dock.item label="Calendar">
            <x-aura::icon name="calendar" size="lg" />
        </x-aura::dock.item>
    </x-aura::dock>
</div>
<x-aura::dock size="lg" :magnify="false">
    <x-aura::dock.item label="Files" href="/files">
        <x-aura::icon name="folder" size="lg" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Photos" href="/photos" :active="true">
        <x-aura::icon name="image" size="lg" />
    </x-aura::dock.item>
    <x-aura::dock.item label="Calendar" href="/calendar">
        <x-aura::icon name="calendar" size="lg" />
    </x-aura::dock.item>
</x-aura::dock>

Slots

Slot Component Description
default dock Contains dock.item children.
default dock.item Icon or custom content rendered inside the dock item.

Accessibility

  • The dock uses role="toolbar" with aria-label="Application dock" for semantic identification.
  • Each item includes an aria-label derived from the label prop.
  • Active items are marked with aria-current="page" when linked.
  • Keyboard navigation: Arrow Left/Right (or Up/Down for vertical docks) to move between items, Enter/Space to activate.
  • The magnification effect is purely visual and does not affect keyboard navigation or screen reader output.