Skip to content

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

Basic 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>

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

<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

<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.