Navigation Bar
Table of contents
1. Overview Table of Contents
The navigation bar is supported by Bootstrap 5 and is responsive based on the size of the viewport. The configuration of the navigation bar is based on a menu_acl json file. More about creating these files can be found here
Lets look at our most complex example.
{
"Home" : "home",
"Contacts" : {
"My Contacts" : "contacts",
"Add Contact" : "contacts/add"
},
"Admin" : "admindashboard/index"
}
The menu associated with this file is shown below in Figure 1.
Figure 1 - Navigation bar with open menu
Figure 2 shows the menu bar but in a configuration for mobile devices.
Figure 2 - Mobile navigation bar with open menu
As discussed in the Layouts section, the left side of the colon is always a label. It can be for a link or the name of a menu. The right side has the following format:
viewDirectoryName/actionName
This follows the same format for the string parameter inside the render function of your controller’s actions.
2. Navigation Bar Layout Table of Contents
The navigation bar is split into sections. The left most side is the branding. This is configured by modifying the MENU_BRAND variable in your .env file.
Next to the branding are the links and menus as described in your menu_acl json file. On the far right is another menu containing your profile image and links to your profile and logout link if your are logged in. This part of the navigation bar changes to show register and login links if you are not logged in.