> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation

> Customize and extend the Shopper control panel navigation

The Control Panel navigation is highly customizable. You can add your own sections, pages, and subpages, as well as remove and modify existing ones.

The navigation is controlled by the [shopper/sidebar](https://github.com/shopperlabs/sidebar) package. This package can be used both as a standalone sidebar builder for any Laravel application or to extend Shopper's admin panel.

<CardGroup cols={2}>
  <Card title="Sidebar Package Overview" icon="sidebar" href="/v2/sidebar/overview">
    Learn about the sidebar package architecture and features.
  </Card>

  <Card title="Extending Shopper Navigation" icon="plus" href="/v2/sidebar/shopper-extension">
    Add custom menu items to the Shopper admin panel.
  </Card>

  <Card title="Standalone Installation" icon="download" href="/v2/sidebar/standalone">
    Use the sidebar package in any Laravel application.
  </Card>

  <Card title="Configuration" icon="gear" href="/v2/sidebar/configuration">
    Configure caching, dimensions, and behavior.
  </Card>
</CardGroup>

## Quick Start

To add navigation items to Shopper, create a sidebar extension class and register it in your service provider:

```php theme={null}
namespace App\Sidebar;

use Shopper\Sidebar\AbstractAdminSidebar;
use Shopper\Sidebar\Contracts\Builder\Group;
use Shopper\Sidebar\Contracts\Builder\Item;
use Shopper\Sidebar\Contracts\Builder\Menu;

class BlogSidebar extends AbstractAdminSidebar
{
    public function extendWith(Menu $menu): Menu
    {
        $menu->group(__('Blog'), function (Group $group): void {
            $group->weight(5);
            $group->setAuthorized();

            $group->item(__('Posts'), function (Item $item): void {
                $item->weight(1);
                $item->setAuthorized();
                $item->useSpa();
                $item->route('shopper.blog.posts.index');
                $item->setIcon('untitledui-file-02');
            });
        });

        return $menu;
    }
}
```

Register it in your `AppServiceProvider`:

```php theme={null}
namespace App\Providers;

use App\Sidebar\BlogSidebar;
use Illuminate\Support\ServiceProvider;
use Shopper\Sidebar\SidebarBuilder;

class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        $this->app['events']->listen(SidebarBuilder::class, BlogSidebar::class);
    }
}
```

<Info>
  Make sure to register the listener in the `register()` method, not `boot()`, to ensure it's registered before the sidebar is built.
</Info>

## API Reference

For a complete API reference, see the detailed documentation:

| Component | Description                             | Documentation                                                     |
| --------- | --------------------------------------- | ----------------------------------------------------------------- |
| Menu      | Root container for groups               | [Standalone Guide](/v2/sidebar/standalone#group-api)              |
| Group     | Collection of related items             | [Standalone Guide](/v2/sidebar/standalone#group-api)              |
| Item      | Navigation entry with icon, badge, etc. | [Standalone Guide](/v2/sidebar/standalone#menu-item-api)          |
| Badge     | Notification indicator                  | [Standalone Guide](/v2/sidebar/standalone#adding-badges)          |
| Append    | Action button                           | [Standalone Guide](/v2/sidebar/standalone#adding-append-elements) |