Adding a page and a menu item

Add a page

1. Create the view resources/views/pages/reports/sales.blade.php:

<x-layouts.app page="reports-sales" title="reports.sales.title">
  <x-shell.page-header title="reports.sales.title" subtitle="reports.sales.subtitle" />

  <div class="fd-page">
    <section class="fd-card">
      <div class="fd-card__body">
        <p data-i18n="reports.sales.empty">{{ __('reports.sales.empty') }}</p>
      </div>
    </section>
  </div>
</x-layouts.app>

2. Register the route in config/orbix-pages.php (route name => URI):

'reports.sales' => 'reports/sales',

The route name maps to the view path: reports.sales renders pages/reports/sales.blade.php.

3. Add the texts to every lang/<locale>.json file (see Languages):

"reports.sales.title": "Sales report",
"reports.sales.subtitle": "Revenue by channel and region",
"reports.sales.empty": "No sales in this period yet."

4. Optional page script. Create resources/js/pages/reports.ts and set module="reports" on the layout:

// resources/js/pages/reports.ts
export function init(): void {
  document.querySelectorAll<HTMLElement>('[data-report-refresh]').forEach((button) => {
    button.addEventListener('click', () => location.reload());
  });
}

The module is loaded only on pages that declare it, so each page downloads the code it needs.

Visit http://localhost:8000/reports/sales.

Pages that need real data use regular Laravel routes and controllers: keep the view, replace the Route::view() entry with your own route in routes/web.php and pass the data to the view.

The sidebar, the horizontal menu, the two-column rail and the command palette are all built from config/orbix-menu.php. Sections hold items and groups; groups hold children:

[
    'id' => 'reports',
    'key' => 'nav.reports',            // section title (translation key)
    'icon' => 'lc-chart-column',
    'items' => [
        ['id' => 'reports-sales', 'route' => 'reports.sales', 'key' => 'nav.sales_report', 'icon' => 'lc-chart-line'],
        [
            'id' => 'reports-more',
            'key' => 'nav.more_reports',
            'icon' => 'lc-folder-open',
            'badge' => ['count' => 3, 'tone' => 'primary'],
            'children' => [
                ['id' => 'reports-stock', 'route' => 'reports.stock', 'key' => 'nav.stock_report'],
            ],
        ],
    ],
],

Key	Meaning
`id`	Unique navigation id; the page's `page` prop marks the current entry
`route`	Named route; the entry is highlighted and its group opens when the route is active
`key`	Translation key of the label
`icon`	Icon id in the sprite: `lc-` (Lucide), `tb-` (Tabler), `fd-i-` or `ox-i-` (Orbix)
`badge`	Optional counter: `['count' => 4, 'tone' => 'primary']`

In-page navigation (the account settings menu and the email folders) marks the link whose data-nav equals the page prop of the layout (<x-layouts.app page="...">); the components read it with @aware(['page' => '']).

Icons

Use any icon of the bundled sets with an SVG <use> reference:

<svg class="fd-icon" aria-hidden="true"><use href="#lc-chart-line"/></svg>

Browse the sets on the Icons pages of the template. Only the icons you reference are included in the sprite: after adding a new lc-* or tb-* icon, run npm run assets (it also runs with npm run dev and npm run build).

Add a page

Add a menu item

Icons