Navigation

Since Twill 3.x there are 2 ways to manage navigation. You can only use one of them at the time. In general we suggest to use the newer approach by registering the navigation in your AppServiceProvider.

There are 3 levels of navigation.

• Primary: The most high level navigation.
• Secondary: Only visible if the primary parent navigation is active.
• Tertiary: Only visible if the secondary parent navigation is active.

# OOP method

To define navigation we use the boot method in our AppServiceProvider, below is an example based on the routing later in this file:

 1use A17\Twill\Facades\TwillNavigation;
 2use A17\Twill\View\Components\Navigation\NavigationLink;
 3 
 4public function boot(): void
 5{
 6    TwillNavigation::addLink(
 7        NavigationLink::make()->forModule('pages')
 8    );
 9    TwillNavigation::addLink(
10        NavigationLink::make()->forModule('projects')
11          ->setChildren([
12            NavigationLink::make()->forModule('projects')
13              ->setChildren([
14                NavigationLink::make()->forModule('projectCustomers'),
15              ]),
16            NavigationLink::make()->forModule('clients'),
17            NavigationLink::make()->forModule('industries'),
18            NavigationLink::make()->forModule('studios'),
19          ]),
20    );
21}

 1<?php
 2 
 3use A17\Twill\Facades\TwillRoutes;
 4 
 5TwillRoutes::module('pages');
 6 
 7Route::group(['prefix' => 'work'], function () {
 8    Route::group(['prefix' => 'projects'], function () {
 9        TwillRoutes::module('projectCustomers');
10    });
11    TwillRoutes::module('projects');
12    TwillRoutes::module('clients');
13    TwillRoutes::module('industries');
14    TwillRoutes::module('studios');
15});

# Legacy method

The config/twill-navigation.php file manages the navigation of your custom admin console. Using Twill's UI, the package provides 3 levels of navigation: global, primary and secondary. This file simply contains a nested array description of your navigation.

Each entry is defined by multiple options. The simplest entry has a title and a route option which is a Laravel route name. A global entry can define a primary_navigation array that will contain more entries. A primary entry can define a secondary_navigation array that will contain even more entries. You can also add a 'target' => 'external' option to open the link in a new window.

Two other options are provided that are really useful in conjunction with the CRUD modules you'll create in your application: module and can. module is a boolean to indicate if the entry is routing to a module route. By default, it will link to the index route of the module you used as your entry key. can allows you to display/hide navigation links depending on the current user and permission name you specify.

# Example

 1<?php
 2 
 3return [
 4    'pages' => [
 5        'title' => 'Pages',
 6        'module' => true,
 7    ],
 8    'work' => [
 9        'title' => 'Work',
10        'route' => 'admin.work.projects.index',
11        'primary_navigation' => [
12            'projects' => [
13                'title' => 'Projects',
14                'module' => true,
15                'secondary_navigation' => [
16                    'projectCustomers' => [
17                        'title' => 'Customers',
18                        'module' => true
19                    ],
20                ]
21            ],
22            'clients' => [
23                'title' => 'Clients',
24                'module' => true,
25            ],
26            'industries' => [
27                'title' => 'Industries',
28                'module' => true,
29            ],
30            'studios' => [
31                'title' => 'Studios',
32                'module' => true,
33            ],
34        ],
35    ],
36];

To make it work properly and to get active states automatically in Twill's UI, you should structure your routes in the same way as the example below:

 1<?php
 2 
 3use A17\Twill\Facades\TwillRoutes;
 4 
 5TwillRoutes::module('pages');
 6 
 7Route::group(['prefix' => 'work'], function () {
 8    Route::group(['prefix' => 'projects'], function () {
 9        TwillRoutes::module('projectCustomers');
10    });
11    TwillRoutes::module('projects');
12    TwillRoutes::module('clients');
13    TwillRoutes::module('industries');
14    TwillRoutes::module('studios');
15});