This module provides backend logic for corresponding frontend component navigation It provides several new functionalities: featured product, navigation teaser, and helps to adjust desktop and mobile navigation according to the project’s requirements. It allows to include or exclude a specific category from desktop or mobile navigation. Also, a custom URL can be used instead of Magento category as a navigation link target.

1 Installation
2 User Guide
3 Admin settings
- 3.1 Main settings
- 3.2 Navigation featured products
- 3.3 Navigation image teaser
- 3.4 Category group
4 Backend
5 Frontend
- 5.1 Styling
- 5.2 Scripts
- 5.3 Additional functionalities
  - 5.3.1 Active category
  - 5.3.2 Category group styling

Installation

This module is required by theme-creativeshop and is installed out of the box when theme-creativeshop is required

composer require "creativestyle/magesuite-navigation" ^2.0.0

User Guide

2.9. Custom Links in Main Navigation

4.7.1. All Categories Navigation Flyout

Admin settings

Main settings

Catalog->Categories

Include in desktop navigation

When enabled category will be shown in navigation for desktop and tablet devices.

Default value: true

Include in mobile navigation

When enabled category will be shown in navigation for mobile devices.

Default value: true

Custom target URL

Links to this category will be replaced with above URL when provided. Use absolute URL (starts with https://) to redirect outside the shop. Use relative URL (i.e. customer/account/login/) to redirect within the shop.

Default value: empty

Include in main bar is part of Magesuite_MegaDropdown module

Navigation featured products

Under Navigation - Featured Products tab:

Choose products to display as featured products inside the desktop navigation flyout of a given category.

Navigation image teaser

Under Navigation - Image Teaser tab:

Add slogan, description, CTA label. CTA target link (all optional) and image (required) in order to display the navigation teaser.

Category group

A category can be marked with a group name. Please use single word string. In the child theme categories with such identifier may have distinct styling.

Backend

BE documentation is in progress

Frontend

Styling

Styling is provided in:

theme-creativeshop/src/components/navigation/navigation.scss

theme-creativeshop/src/components/offcanvas-navigation/offcanvas-navigation.scss

Scripts

theme-creativeshop/src/components/navigation/navigation.ts

theme-creativeshop/src/components/offcanvas-navigation/offcanvas-navigation.ts

Additional functionalities

Active category

getActiveCategoryPath method, used in corresponding template magesuite-navigation/view/frontend/templates/navigation/active-category-path.phtml and then in theme-crativeshop in order to mark the active category with .active class

Category group styling

If a category is assigned to a group in the admin panel (see documentation above) it is possible to apply an additional styling to such navigation item.

Example:

.cs-navigation__item[data-category-identifier='eco'] {
    & > #{$root}__link {
        color: #76b636 !important;

        &:after {
            content: '';
            background-image: url('../images/icons/leaf.svg');
            background-repeat: no-repeat;
            background-size: 1.5rem;
            width: 1.5rem;
            height: 1.7rem;
            margin-left: 0.4rem;
            transform: translateY(0.2rem);
            display: inline-block;
        }
    }
}