Accelade Navigation

Build beautiful, accessible navigation menus for Laravel applications with Blade components. Part of the Accelade ecosystem.

Features

• Blade Components - <x-navigation::nav>, <x-navigation::nav-item>, <x-navigation::nav-group>
• Flexible Layouts - Vertical sidebars, horizontal headers, or custom arrangements
• Collapsible Groups - Organize items into expandable/collapsible sections
• Badges - Display counts, status indicators, or labels with color variants
• Icons - Support for Heroicons and custom icon sets
• Active State Detection - Automatic or manual active state handling
• PHP Builder API - Build navigation programmatically with NavigationItem and NavigationGroup classes
• Panel Integration - Seamlessly integrates with accelade/panel for admin interfaces

Installation

You can install the package via composer:

composer require accelade/navigation

You can publish the config file with:

php artisan vendor:publish --tag="navigation-config"

Quick Start

Basic Navigation

<x-navigation::nav>
    <x-navigation::nav-item
        label="Dashboard"
        href="/dashboard"
        icon="heroicon-o-home"
        :active="true"
    />
    <x-navigation::nav-item
        label="Users"
        href="/users"
        icon="heroicon-o-users"
        badge="12"
        badge-color="primary"
    />
    <x-navigation::nav-item
        label="Settings"
        href="/settings"
        icon="heroicon-o-cog-6-tooth"
    />
</x-navigation::nav>

Navigation Groups

<x-navigation::nav>
    <x-navigation::nav-item label="Dashboard" href="/dashboard" icon="heroicon-o-home" />

    <x-navigation::nav-group label="Content" icon="heroicon-o-folder">
        <x-navigation::nav-item label="Posts" href="/posts" badge="24" />
        <x-navigation::nav-item label="Pages" href="/pages" />
        <x-navigation::nav-item label="Media" href="/media" />
    </x-navigation::nav-group>

    <x-navigation::nav-group label="Settings" icon="heroicon-o-cog-6-tooth" :collapsed="true">
        <x-navigation::nav-item label="General" href="/settings/general" />
        <x-navigation::nav-item label="Security" href="/settings/security" />
    </x-navigation::nav-group>
</x-navigation::nav>

Horizontal Navigation

<x-navigation::nav direction="horizontal">
    <x-navigation::nav-item label="Home" href="/" :active="true" />
    <x-navigation::nav-item label="Features" href="/features" />
    <x-navigation::nav-item label="Pricing" href="/pricing" />
    <x-navigation::nav-item label="Docs" href="https://docs.example.com" :external="true" />
</x-navigation::nav>

PHP Builder API

use Accelade\Navigation\NavigationItem;
use Accelade\Navigation\NavigationGroup;

$navigation = [
    NavigationItem::make('Dashboard')
        ->icon('heroicon-o-home')
        ->url('/dashboard'),

    NavigationGroup::make('Content')
        ->icon('heroicon-o-folder')
        ->items([
            NavigationItem::make('Posts')
                ->icon('heroicon-o-newspaper')
                ->url('/posts')
                ->badge(fn () => Post::count()),
            NavigationItem::make('Pages')
                ->icon('heroicon-o-document')
                ->url('/pages'),
        ]),
];

Documentation

The package includes comprehensive documentation available in the Accelade docs portal:

• Getting Started - Installation and basic usage
• Nav Item - Item configuration and options
• Nav Group - Collapsible groups and nesting

Badge Colors

Available badge colors: primary, success, warning, danger, info, gray

<x-navigation::nav-item label="New" badge="5" badge-color="success" />
<x-navigation::nav-item label="Urgent" badge="!" badge-color="danger" />

Testing

# Run tests
composer test

# Run tests with coverage
composer test:coverage

# Run code formatter
composer format

# Run mago linter
composer mago

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Fady Mondy
• All Contributors

License

The MIT License (MIT). Please see License File for more information.