Navigation Widget

From unroole CMS wiki
Revision as of 08:51, 9 October 2012 by Mbasset (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Navigation Widget In Action.png

Using navigation widget to display a navigation.

Navigation Widget provides a simple way to display and change navigations for your website.

Management

Navigation Admin.png

Navigation section tabs and expanded parent item.

To manage the navigation widget in the admin section you need to switch to advance mode by clicking on the link "Switch to advanced mode" at the right of the top navigation bar. The navigation items can be divide into two section: header and footer. You can navigate by clicking on the tabs "Header" and "Footer" to view the corresponding items. Additionally, parent navigation items can be expanded to see their children.

Creation

To create a navigation item:

  1. Navigate to 'Navigation' under 'Widget Management'.
  2. Click on 'Add Nav Item'.
  3. Complete the mandatory fields.
  4. Click on 'Submit' to complete the creation.

Update

To update a navigation item:

  1. Navigate to 'Navigation' under 'Widget Management'.
  2. Find the item in the list and click on the corresponding 'Edit' icon.
  3. Complete the mandatory fields.
  4. Click on 'Submit' to complete the update.

Removal

To remove a navigation item:

  1. Navigate to 'Navigation' under 'Widget Management'.
  2. Find the item in the list and click on the corresponding 'Delete' icon.
  3. You will be prompted to confirm the item deletion. Click 'Ok' to finalize the deletion.

Properties

In the Layout Editor, navigation widget have these properties:

Navigation WIdget Property.png

Property panel for Navigation Widget
Name Description
Section Choose the section where you want the navigation to be at.
Custom Id Type in a custom id. This id can then be used in CSS and Javascript to change the style and behaviour of this gallery.
Custom Classes Type in a custom class, or mutiple classes seperated. These classes can then be used in CSS and Javascript to change the style and behaviour of this gallery.