Header Components

The default header which comes with Twilight includes all of header-related components such as header,breadcrumbs,menu and many more. Developers can easily modify these components, as we see in this article.

Following is the location of the header components:

Header Components Example

In the following example we can see that the header includes:

Header

Breadcrumbs

Menu Item

Header

This part is the main component of the header which embeds several parts, such as breadcrumbs and main menu.

Troubleshooting Tip

The header design can occasionally be hidden. You can see twilight::errors in the browser's console logs, where you can investigate the problem. The following illustrates the error as follows:

Array to string conversion in File [src/views/components/header/header.twig] at line 7

The below code should solve the issue:

The line {% set nav_type = theme.settings.get('your_arrayable_key') %} retrieves the value of a setting from the Twilight theme settings. The developer needs to replace your_arrayable_key with the actual key representing the setting that contains the array.

By using this code, the developer handles the scenario where nav_type is an array. If it is an array, you are setting nav_type to its first item. This way, you avoid the error related to converting the array to a string.

Educational Clip

This component receives an object representing an advertisement's text, and then displays its details.

Variables

Usage

Using the advertisement object, we can get the details of advertisement.icon, advertisement.url, advertisement.description, and so on. The developer can use these data within any style designed by them.

Breadcrumbs

Breadcrumbs are a set of links that indicate the current page and its "ancestors" (parent, grandparent, and so on), usually leading back to the site's homepage.

Variables

Breadcrumbs

Usage

This component receives breadcrumbs , which is an array of breadcrumb described by their title and url. A loop goes through this object and display its parts. Developer has the option to edit the look-and-feel of this object.

This component represents the store's main menu, which is usually for the store categories pages. It's considered as the primary roadmap for the customers to the store's internal categories. It comes with many options, such as a list of products to be displayed on the menu.

Variables

Menus

Usage

For this component, the object menus contains the details of each item in the menu. Using a loop these menu items can be displayed.

Educational Clip

The Menu Item component plays a vital role in navigation and user experience. It helps create dynamic menus by organizing individual menu items.

Usage

The menu item component is used for both mobile and desktop devices. It generates menu items with corresponding links and handles child menu items and associated products, adapting to different screen sizes.