Lara Dashboard Lara Dashboard
/
main (default) 0.x

Navigation Components

Navigation and layout components including breadcrumbs, tabs, and dropdown menus for building intuitive user interfaces.

Navigation Components

Navigation components help users orient themselves within the application and move between different sections. LaraDashboard provides breadcrumbs, tabs, dropdowns, and action menus.

Available Navigation Components

Component Purpose
<x-breadcrumbs> Page hierarchy and navigation
<x-tabs> Tabbed content navigation
<x-dropdown> Dropdown menu with options
<x-actions-dropdown> Action menu for items
<x-actions-dropdown-item> Individual dropdown action

Breadcrumbs Component

Displays page hierarchy with optional back navigation and action buttons.

Props (via $breadcrumbs array)

Key Type Default Description
disabled boolean false Hide breadcrumbs
title string '' Page title
items array [] Breadcrumb trail
show_home boolean true Show home link
show_current boolean true Show current page
show_messages_after boolean true Show flash messages
back_url string null Custom back URL
icon string null Title icon
action mixed null Action button config

Slots

Slot Description
title_before Content before title
title_after Content after title
actions_before Buttons before main action
actions_after Buttons after main action

Basic Usage

<x-breadcrumbs :breadcrumbs="[
    'title' => 'Users',
]" />

With Back Navigation

<x-breadcrumbs :breadcrumbs="[
    'title' => 'Edit User',
    'back_url' => route('admin.users.index'),
]" />

With Icon

<x-breadcrumbs :breadcrumbs="[
    'title' => 'Dashboard',
    'icon' => 'lucide:layout-dashboard',
]" />

With Action Button

{{-- Array configuration --}}
<x-breadcrumbs :breadcrumbs="[
    'title' => 'Users',
    'action' => [
        'url' => route('admin.users.create'),
        'label' => 'Add User',
        'icon' => 'feather:user-plus',
        'permission' => 'create users',
    ],
]" />

{{-- Click handler --}}
<x-breadcrumbs :breadcrumbs="[
    'title' => 'Settings',
    'action' => [
        'click' => 'openModal()',
        'label' => 'New Setting',
        'icon' => 'lucide:plus',
    ],
]" />

{{-- Pill style button --}}
<x-breadcrumbs :breadcrumbs="[
    'title' => 'Categories',
    'action' => [
        'url' => route('admin.categories.create'),
        'label' => 'Add',
        'icon' => 'lucide:plus',
        'pill' => true,
    ],
]" />

With Additional Actions

<x-breadcrumbs :breadcrumbs="[
    'title' => 'Post Editor',
    'action' => [
        'click' => 'publish()',
        'label' => 'Publish',
    ],
]">
    <x-slot name="actions_before">
        <x-buttons.button variant="secondary" wire:click="saveDraft">
            Save Draft
        </x-buttons.button>
    </x-slot>

    <x-slot name="actions_after">
        <x-dropdown :options="[
            ['value' => 'preview', 'label' => 'Preview'],
            ['value' => 'schedule', 'label' => 'Schedule'],
        ]" buttonLabel="More" />
    </x-slot>
</x-breadcrumbs>

With Title Decorations

<x-breadcrumbs :breadcrumbs="[
    'title' => $user->name,
]">
    <x-slot name="title_after">
        <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800">
            Active
        </span>
    </x-slot>
</x-breadcrumbs>

Real Example from Codebase

{{-- User edit page --}}
<x-breadcrumbs :breadcrumbs="[
    'title' => __('Edit User'),
    'icon' => 'lucide:user',
    'back_url' => route('admin.users.index'),
    'action' => [
        'url' => route('admin.users.create'),
        'label' => __('Add New'),
        'icon' => 'feather:plus',
        'permission' => 'create users',
    ],
]" />

{{-- Posts listing --}}
<x-breadcrumbs :breadcrumbs="[
    'title' => __('Posts'),
    'action' => [
        'url' => route('admin.posts.create'),
        'label' => __('Create Post'),
        'icon' => 'lucide:file-plus',
        'permission' => 'create posts',
    ],
]">
    <x-slot name="actions_before">
        <x-dropdown
            :options="[
                ['value' => 'all', 'label' => __('All')],
                ['value' => 'published', 'label' => __('Published')],
                ['value' => 'draft', 'label' => __('Drafts')],
            ]"
            buttonLabel="{{ __('Filter') }}"
            wire:model="statusFilter"
        />
    </x-slot>
</x-breadcrumbs>

Tabs Component

Tabbed navigation for organizing content into sections.

Props

Prop Type Default Description
tabs array [] Tab configuration
active string null Active tab ID

Tab Configuration

Each tab in the tabs array:

Key Type Description
id string Unique identifier
label / title string Display text
name string Alternative to id

Basic Usage

<div x-data="{ active: 'general' }">
    <x-tabs :tabs="[
        ['id' => 'general', 'label' => 'General'],
        ['id' => 'security', 'label' => 'Security'],
        ['id' => 'notifications', 'label' => 'Notifications'],
    ]" />

    {{-- Tab content --}}
    <div x-show="active === 'general'">
        General settings content...
    </div>

    <div x-show="active === 'security'">
        Security settings content...
    </div>

    <div x-show="active === 'notifications'">
        Notification settings content...
    </div>
</div>

With Card Container

<div x-data="{ active: 'profile' }">
    <x-card.card>
        <x-slot name="header">
            <x-tabs :tabs="[
                ['id' => 'profile', 'label' => 'Profile'],
                ['id' => 'account', 'label' => 'Account'],
                ['id' => 'billing', 'label' => 'Billing'],
            ]" />
        </x-slot>

        <div x-show="active === 'profile'" class="space-y-4">
            <x-inputs.input label="Name" name="name" />
            <x-inputs.input label="Bio" name="bio" />
        </div>

        <div x-show="active === 'account'" class="space-y-4">
            <x-inputs.input label="Email" name="email" />
            <x-inputs.password label="Password" name="password" />
        </div>

        <div x-show="active === 'billing'" class="space-y-4">
            <p>Billing information...</p>
        </div>
    </x-card.card>
</div>

Real Example from Codebase

{{-- Settings page with tabs --}}
<div x-data="{ active: 'general' }">
    <x-breadcrumbs :breadcrumbs="['title' => __('Settings')]" />

    <x-card.card>
        <x-slot name="header">
            <x-tabs :tabs="[
                ['id' => 'general', 'label' => __('General')],
                ['id' => 'appearance', 'label' => __('Appearance')],
                ['id' => 'email', 'label' => __('Email')],
                ['id' => 'advanced', 'label' => __('Advanced')],
            ]" />
        </x-slot>

        <div x-show="active === 'general'">
            @livewire('settings.general-settings')
        </div>

        <div x-show="active === 'appearance'">
            @livewire('settings.appearance-settings')
        </div>

        <div x-show="active === 'email'">
            @livewire('settings.email-settings')
        </div>

        <div x-show="active === 'advanced'">
            @livewire('settings.advanced-settings')
        </div>
    </x-card.card>
</div>

Dropdown Component

General-purpose dropdown menu for selecting options.

Props

Prop Type Default Description
options array [] Dropdown options
label string null Label above dropdown
buttonLabel string 'Select...' Button text
selected mixed null Selected value
name string null Hidden input name
class string '' Additional classes

Options Configuration

$options = [
    ['value' => 'option1', 'label' => 'Option 1'],
    ['value' => 'option2', 'label' => 'Option 2'],
    ['value' => 'option3', 'label' => 'Option 3', 'href' => '/link'],
];

Basic Usage

<x-dropdown
    :options="[
        ['value' => 'edit', 'label' => 'Edit'],
        ['value' => 'duplicate', 'label' => 'Duplicate'],
        ['value' => 'delete', 'label' => 'Delete'],
    ]"
    buttonLabel="Actions"
/>

With Selection

<x-dropdown
    label="Sort By"
    name="sort"
    :options="[
        ['value' => 'newest', 'label' => 'Newest First'],
        ['value' => 'oldest', 'label' => 'Oldest First'],
        ['value' => 'name', 'label' => 'Name A-Z'],
    ]"
    :selected="$currentSort"
/>

With Custom Slot Content

<x-dropdown buttonLabel="More Actions">
    <button class="w-full px-4 py-2 text-left hover:bg-gray-100" @click="editItem()">
        <iconify-icon icon="lucide:edit" class="mr-2"></iconify-icon>
        Edit
    </button>
    <button class="w-full px-4 py-2 text-left hover:bg-gray-100" @click="duplicateItem()">
        <iconify-icon icon="lucide:copy" class="mr-2"></iconify-icon>
        Duplicate
    </button>
    <hr class="my-1" />
    <button class="w-full px-4 py-2 text-left text-red-600 hover:bg-red-50" @click="deleteItem()">
        <iconify-icon icon="lucide:trash-2" class="mr-2"></iconify-icon>
        Delete
    </button>
</x-dropdown>

Actions Dropdown Component

Specialized dropdown for row/item actions in tables and lists.

Basic Usage

<x-actions-dropdown>
    <x-actions-dropdown-item href="{{ route('users.edit', $user) }}" icon="lucide:edit">
        {{ __('Edit') }}
    </x-actions-dropdown-item>

    <x-actions-dropdown-item href="{{ route('users.show', $user) }}" icon="lucide:eye">
        {{ __('View') }}
    </x-actions-dropdown-item>

    <x-actions-dropdown-item
        @click="confirmDelete({{ $user->id }})"
        icon="lucide:trash-2"
        variant="danger"
    >
        {{ __('Delete') }}
    </x-actions-dropdown-item>
</x-actions-dropdown>

Actions Dropdown Item

Prop Type Default Description
href string null Link URL
icon string null Iconify icon
variant string 'default' Color: default, danger
click string null Click handler

Real Example from Codebase

{{-- In datatable action column --}}
<x-actions-dropdown>
    @can('update', $user)
        <x-actions-dropdown-item
            href="{{ route('admin.users.edit', $user) }}"
            icon="lucide:pencil"
        >
            {{ __('Edit') }}
        </x-actions-dropdown-item>
    @endcan

    @can('view', $user)
        <x-actions-dropdown-item
            href="{{ route('admin.users.show', $user) }}"
            icon="lucide:eye"
        >
            {{ __('View') }}
        </x-actions-dropdown-item>
    @endcan

    @if(auth()->user()->can('impersonate users') && auth()->id() !== $user->id)
        <x-actions-dropdown-item
            wire:click="impersonate({{ $user->id }})"
            icon="lucide:log-in"
        >
            {{ __('Impersonate') }}
        </x-actions-dropdown-item>
    @endif

    @can('delete', $user)
        <x-actions-dropdown-item
            @click="confirmDelete = true; deleteId = {{ $user->id }}"
            icon="lucide:trash-2"
            variant="danger"
        >
            {{ __('Delete') }}
        </x-actions-dropdown-item>
    @endcan
</x-actions-dropdown>

Arrow Link Component

Simple link with arrow icon for navigation.

Basic Usage

<x-arrow-link href="{{ route('docs') }}">
    Read the Documentation
</x-arrow-link>

<x-arrow-link href="/settings" direction="left">
    Back to Settings
</x-arrow-link>

Best Practices

  1. Consistent breadcrumbs - Use on all pages for orientation
  2. Logical tab organization - Group related content
  3. Permission checks - Hide unauthorized actions
  4. Keyboard navigation - Ensure dropdown accessibility
  5. Clear labels - Use descriptive action text
  6. Back navigation - Always provide a way back
  7. Icon consistency - Use the same icon for same action types

Next Steps

Edit this page on GitHub
/