In the Barebones theme, you can create a mobile-friendly drop-down menu with an online store's product categories. This article demonstrates how to implement such a menu.

navigations.jg-plugin

By using this plugin, you can convert the drawer element's product category menu into a drop-down menu. The navigations.js plugin should be accompanied by the drawers.js plugin. The Navigations plugin also comes in handy when implementing items such as mobile drop-down menus.

The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.

The default theme includes jQuery by default.

The plugin can be found in the default theme's file /scripts/plugins/navigations.js.

The appearance of the menu has been defined in the /styles/scss/modules/_navigations.scss file.

The default theme's mobile product category menu has been implemented with the navigations.js plugin.

The desired menu is placed inside the element with the DrawerNavigationclass. The plugin hides the child elements of each link marked with the HasSubCategoriesclass and adds a toggle for opening and closing the menu in connection with the link.

The example below shows an implementation of the product category menu that uses the navigations.js plugin:

<div class="Drawer" data-drawer="menu" data-drawer-side="left">
	{Categories(
		show: 'all',
		before: '<div class="DrawerNavigation">',
		after: '</div>'
	)}
	{LanguageNavigation(
		before: '
			<div class="DrawerNavigation">
				<ul>
					<li class="HasSubCategories">
						<a href="#">{CurrentLanguage}</a>',
		after: '
					</li>
				</ul>
			</div>'
	)}
</div>

To enable the plugin in the theme, initialize it with the command MCF.Navigations.init().

The styles of the product category navigation

The menu layout can be modified in the default theme's file /styles/scss/modules/_navigations.scss. The file contains both the styles for the product category menu contained in the drawer element and also for the navigation panel used on bigger screens.