Menu system

How to use/configure supported menu systems in T3 Framework.

T3 Bootstrap 2 version

T3 supports Megamenu, that allows you to display your menu flexiblely. Arrange menu items in columns, adding any content to menu ...

Please note that, the navigation settings are not global settings, that means in each style, it can have difference navigation. In each style, you can display different menus as main menu.

To enable Megamenu, please open Navigation tab. Enable Megamenu> option then open Megamenu configuration panel.

Configuration Level

There are 3 levels of configuration that you should know

  • Submenu setting
  • Column setting
  • Menu item setting

1. Sub-megamenu setting

This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.

2. Column Setting

In this level of configuration, you can: Add column, remove column, set width of column, assign module to column.

3. Menu Item

In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item.

Enable Submenu

This option is to show or hide submenu of a parent menu. If a menu does not have submenu, when you enable this option, it allows you to add new submenu and add content to the submenu.

To add submenu, click on menu that you want to add submenu (you can only add submenu for a menu that has no child menus).

Add new column/row

You can add new column or row for a selected column/row.

Group submenu or not

You can group submenus of any menu item by selecting the menu item then enable option "Group".

Assign any module for new created row/submenu

After adding new row/submenu, you can display content from any module by assigning the module to the row/submenu.

Move menu item

You can move a menu item to next or previous column. This option will help you to devide menu items into columns.

Resize submenu and column width

T3 allows you to change size of submenu. Select the submenu then change its size in pixel.

After changing size of the submenu, you can change size of a column, select the column and set the Width (total is 12).

You can style for any level of Megamenu: menu item, column, submenu by adding a class to Extra Class field.

There are 2 files that you should add style for MegaMenu.

  • megamenu.less in: plugins/system/t3/base/less
  • megamenu.less in: templates/t3_bs3_blank/less

You can add class to define icon that you want to add to menu item, or you can use classes of Bootstrap and Font aweasome.

  1. Bootstrap 3 icon list
  2. Font Aweasome 4 icon list

Let's check front-end

T3 supports 4 animation types for Megamenu. Please keep in mind that this feature is only available from version: 1.2.5

There are 2 fields for animation configuration: Animation type and Duration.

Currently, T3 supports 4 animation types: Fading, Slide, Elastic, and Zoom.

These are video tutorials for Megamenu configuration and animation setting for megamenu.

Megamenu configuration

This is the video tutorial for Megamenu configuration, you will learn how to build up a Megamenu, how to use Megamenu settings effectively, how to add icons, how to style menu item with our T3 Framework

Still have trouble?

Adding Animation Effect for Megamenu

In this tutorial, you will learn how to add animation effect for Megamenu. There are 4 animation types, for each animation type selected, you can set the duration for that effect when you hovering or change menus

Still have trouble?

T3 supports 2 navigation systems for small screens, the first one is the default Bootstrap navigation called Collapse navigation for small screens, the second one is the Off-canvas sidebar. Check out Off-canvas sidebar configuration documentation

To enable default Bootstrap navigation, in the Navigation tab, enable option Collapse navigation for small screens.

Front-end Appearance.

Note: We suggest you to disable this option if you use Off-canvas sidebar for navigation in small screens.

The new Off-Canvas sidebar is now independent with Collapse Navigation for small screens. The Off-canvas sidebar displays content from a defined position.

Enable Off-canvas sidebar

To enable Off-Canvas sidebar, open Add-ons tab then enable Off-canvas sidebar.

Assign a module position to Off-canvas sidebar. By default, Off-canvas will be assigned to off-canvas position.

Add content for Off-canvas sidebar by creating modules then assign them to off-canvas position.

Front-end Appearance

To display menu in off-canvas sidebar, create module menu then assign the menu to "off-canvas" position.

Use Off-canvas as Navigation in small screens

In case you want to display Off-canvas sidebar as navigation in small screens like tablet, mobile, please disable Off-canvas sidebar in responsive layouts.

Front-end appearance