How to Set the Sidebar/Navigation Drawer Menu

How to Set Sidebar/Navigation Drawer Menu

Here are some steps for setting the Sidebar Menu (Drawer) for the Materia X2:

1. Go to Blogger Dashboard, select the Layout menu. Look for the Section titled HEADER LOGO & DRAWER MENU > Click the pencil icon on the Drawer Menu (Link List) gadget.
2. A Link List configuration popup will appear. Click Add A New Item.
3. In the Site Name field, enter the name of your Menu.
4. In the Site URL field, enter a link of your Menu.
5. Finally, click the Save button.

How to Set Multilevel/Dropdown/Sub Menu

Setting it up is almost the same as the previous steps, you can follow these steps:

1. Go to Blogger Dashboard, select the Layout menu. Look for the Section titled HEADER LOGO & DRAWER MENU > Click the pencil icon on the Drawer Menu (Link List) gadget.
2. Click the Pencil icon to edit the existing menu or you can create a new menu by clicking the Add A New Item.
3. To create a second Sub-Menu, you can enter one Underscore character "_" in the New Site Name field before the Name of the menu. Example: _Your Menu.
4. To create a third Sub-Menu, you can enter two Underscore character "__" in the New Site Name field before the Name of the menu. Example: __Your Menu.

So, the menu structure could look like this:

Menu 1
_Menu 1.1
__Menu 1.1.1
Menu 2
_Menu 2.1
_Menu 2.2
__Menu 2.2.1
Menu 3
Menu 4

Note:

• Make sure the Menu that has an Underscore character is at the bottom of the menu where there is no Underscore character.
• The sub menu will automatically have an arrow icon.
• In Materia X2 v2.3. Sub Menu can only be up to level 2.

How to Set an Icon on the Menu

1. To install Icons, you can first install a Browser Plugin called Material Design Icons for Chrome or Firefox.
2. Once installed, click the Material Design Icons Plugin icon, type the name of the icon you want to use in the search field.
3. Select the icon, then select the menu (three dots) at the bottom and click Copy SVG.
4. Go to Blogger Dashboard, select the Layout menu. Look for the Section titled HEADER LOGO & DRAWER MENU > Click the pencil icon on the Drawer Menu (Link List) gadget.
5. A Link List configuration popup will appear. Click the Pencil icon to edit the existing menu or you can create a new menu by clicking the Add A New Item.
6. In the Site Name field, paste the SVG Path that you copied earlier right before the Menu Name. Example: <svg> ... </svg> Menu Name.
7. To add Icons on Sub Menu level 2. You can place the SVG Path after the underline. Example: _<svg> ... </svg> Menu Name.
8. Finally, click the Save button.

Note:

• In Materia X2 v2.0 to v2.2. You can't use the icon on the second or third sub-menu, only the main menu can use the SVG icon.
• In Materia X2 v2.3. Sub Menu can only be up to level 2. The advantage is, you can also add an SVG Icon to the sub menu.

How to Add Menu Borders/Dividers

1. Go to Blogger Dashboard, select the Layout menu. Look for the Section titled MATERIA THEME PANEL > Click the pencil icon on the Custom CSS (Link List) gadget.
2. A Link List configuration popup will appear. Click Add A New Item.
3. In the Site Name field, enter menuDivider.
4. In the Site URL field, enter the sequence number of the link. For example, if you want to provide a divider on the second menu, then you can fill in the New Site URL with the number 2.
5. Repeat the steps above if you want to add border/divider to other menus.
6. Finally, click the Save button.

How to Add Menu Text Badge

This setting is useful for adding "Newest" badge text to the Menu. Here are a few steps to add it:

1. Go to Blogger Dashboard, select the Layout menu. Look for the Section titled MATERIA THEME PANEL > Click the pencil icon on the Custom CSS (Link List) gadget.
2. A Link List configuration popup will appear. Click Add A New Item.
3. In the Site Name field, enter menuBadge.
4. In the Site URL field, enter the sequence number of the link. For example, if you want to provide a Text Badge on the second menu, then you can fill in the Site URL with the number 2.
5. Repeat the steps above if you want to add Text Badge to other menus.
6. Finally, click the Save button.

Note:

• This feature only works on Materia X2 version 2.3.
• This feature only works on the main menu and does not work on sub menu levels 2 and 3.
• At this time, the badge text cannot be configured/customized. The text will be rendered automatically from the server depending on the language you are using.

You can see the complete documentation of the Materia X2 - Material Design Blogger Theme on the EL Creative Academy.

If you have any questions, feel free to write them down in the comments section below. If you (especially the owner of Materia X2) want to request additional features or want to provide feedback. Don't hesitate to send it via the Request and Feedback page. Thank you.

Habibi

Tulis Komentar Anda

SHARE