Category navigation
This topic is divided into three parts. The first part describes the functions of different category navigation controls to help you choose the right one. The second part explains how to add and configure category navigation controls. The third part shows how to design second-level and third-level navigation.
1.1 Functions of navigation controls
Horizontal navigation: A horizontally displayed navigation bar. You can click an item to go to a specific location or another page.
Vertical navigation: A vertically displayed navigation bar. You can click an item to go to a specific location or another page.
Breadcrumbs: After you add this control, the visitor's access path is displayed as a visualization. Visitors can use the breadcrumbs to return to previous pages.
Language switcher: If you use the multi-language feature, you must add the language switcher control to the page. This allows visitors to switch their viewing language. For a video demonstration of this operation, see How to switch between Chinese and English.
Mobile/PC switcher: You must add this control in both the PC and mobile designers. This allows visitors to switch between the PC and mobile versions of the site.
2.1 Add a category navigation control
Click . Select a control, such as horizontal navigation, vertical navigation, breadcrumbs, language switcher, or Mobile/PC switcher. Then, click a suitable position in the design area to add the control.
2.2 Configure a category navigation control
For a video tutorial on navigation, see Using navigation controls.
Click Navigation to open the quick settings panel for navigation.
Style: Set the style for the navigation's normal, hover, and selected states.
Edit: Set the navigation item's name, parent navigation, link target, opening method, and icon. The link settings are shown in the following figure.
Animation: Set the animation effect for the navigation.
Arrangement: Set the size and position.
2.3 Horizontal navigation: Navigation container settings
The first style in the horizontal navigation is the navigation container. Because it has many design options, its configuration is complex. This section explains how to configure this control.
Style:
Normal: Set the style for the idle state.
Switch: Set the style for when the user scrolls down.
Hover: Set the style for when the mouse pointer is over the control.
Selected: Set the style for after the control is clicked.
Edit:
Image settings: Set the logo image for the idle and scrolled states. You can also set the hover text, link target, and opening method for the image.
Navigation settings: Add navigation items and set their parent navigation, link, opening method, and icon.
Animation: Set the animation effect for the navigation.
Arrangement: Set the size.
NoteBy default, this navigation container control is displayed at the top of the page. You cannot change its position.
2.5 Delete the current control
When the navigation control is selected, you can click the trash can icon to delete the control.
3.1 Application extension: How to set up second-level navigation
Method 1: When adding a navigation item, select a parent navigation to add a second-level navigation item under it. You can then configure the new second-level item.
Method 2: After adding an item, you can drag it onto another navigation item to make it a second-level item. You can then edit or delete the item.
3.2 Application extension: How to set up third-level navigation
You can create third-level navigation by combining a tab control and a navigation control.
Add a tab control. Click , select the tab control with up and down arrows, and add it to a suitable position on the page.
The tab control acts as a container, which is the first-level navigation. You can place a navigation control inside the tab container to create the second-level navigation.
NoteA prompt appears to confirm when you move an element into the tab.
With the navigation control in edit mode, click to set up the third-level navigation. Select the parent navigation and the page to associate with the navigation item.
