12 Jan, 2021

Last edited: 26 Dec, 2024, 7:22 AM

Menus configurator

Each Network Site has multiple menus and navigation elements. The menus and navigations elements are fully responsive and adapt themselves to the screen - mobile, tablet, or larger. All Menus are configurable.

Mobile screens#

A mobile view has a Header at the top and a Navigation Bar at the bottom. The Header contains (left -> right):

1. Extended Menu (sliding in) at the top left
2. Smaller, icon logo of the Network Site
3. (Optional) Language switcher
4. Search icon
5. (Optional) Shopping cart
6. Notifications icon with badge count
7. Member's logged in drop down menu

The bottom Navigation Bar provides access to primary destinations of the network site.

In order to maximize screen real estate, the bottom navigation bar automatically hides itself on scroll down.

Medium screens (less than 1200px viewport)#

On medium screens (eg tablet) there is a Navigation Bar at the top, which contains (left -> right):

1. Extended Menu (sliding in) at the top left
2. Network site logo
3. Navigation Bar Menu which provides access to primary destinations of the network site
4. (Optional) Language switcher
5. Search icon
6. (Optional) Shopping cart
7. Notifications icon with badge count
8. Member's logged in drop down menu

Large screens (1200px viewport and higher)#

On large screens (eg laptop, desktop) there is a Navigation Column at the left, which contains (top -> bottom):

1. Network site logo
2. Extended Menu (sliding in) at the top left
3. (Optional) Language switcher
4. (Optional) Shopping cart
5. Notifications icon with badge count
6. Member's logged in drop down menu
7. Navigation Column Menu which provides access to primary destinations of the network site
8. Statutory pages (if configured under Essential settings)

Navigation Column Menu#

This graphical menu is shown on the Navigation Column at the left side of larger screens. It provides access to primary destinations of the network site.

Menu editor

1. Various available destinations are automatically shown in the list depending on what features are available, etc
2. One can select items from the list, and then drag and drop to rearrange the order.
3. The menu item text can be edited.

Navigation Bar Menu#

This graphical menu is shown on the Navigation Bar at the top of medium screens and on the bottom of small screens. It provides access to primary destinations of the network site.

Menu editor

1. Various available destinations are automatically shown in the list depending on what features are available, etc
2. One can select items from the list, and then drag and drop to rearrange the order.
3. This menu can fit only 5 items and hence only the 1st 5 items will be retained.
4. The menu item text can be edited.

Navigation Bar Dropdown Menu#

MainCross instances which are configured as a traditional website (rather than a Network Site) can have upto 3 menu items, with optional drop down items. This menu is shown on the Navigation Bar at the top of medium and large screens.

Menu editor

The menu items are defined as a json array in the editor.

Each menu item can be:

1. Standalone, ie a link by itself, which when clicked on opens the linked resource.
2. Drop down, which when clicked on shows a drop down list of menu items.

text= The text that should be displayed on the menu item. Keep it short!

children= Nested menu items defined as a json array, which will show up in the drop down.

url= Internal or External link for the menu item

If a menu item has children (ie the drop down items), it should not have the url key.

[
  {
    "text": "Menu label",
    "children": [
      {
        "text": "Display text",
        "url": "Internal or external URL"
      },
      {
        "text": "Display text",
        "url": "Internal or external URL"
      },
      {
        "text": "Display text",
        "url": "Internal or external URL"
      },
      {
        "text": "Display text",
        "url": "Internal or external URL"
      }
    ]
  },
  {
    "text": "Menu label",
    "url": "Internal or external URL"
  }
]

Extended menu#

The top left multi level Extended Menu is fully configurable and can be configured to show any number of menu items arranged in sets (with dividers), and with 1 level of nesting.

Menu editor

The comprehensive menu editor can be used to create the Menu Items without mucking around with manual items and links. Menu Items are created from the page title and automatically point to it's URL.

The menu consist of the following types of Menu Items:

1. Menu elements
2. System destinations
3. Topic channels
4. Featured pages
5. General pages
6. Help pages
7. Custom links

Available topics channels & pages of the network site are available in the left panel. In addition, various system routes are available, eg /network, /channel, /marketplace etc. Finally, upto 10 custom links can also be added. Custom links can be both internal and external.

Note that internal custom links should be a complete URL starting with https://.

Basic configuration

1. Open a section in the left panel
2. Select a Menu Items to add to the right panel
3. Edit the Menu Items on the right panel as designed
4. Drag and drop items to set the desired order
5. Save the menu configuration

The Menu Items in the right panel "Select menu items" automatically show up in the menu.

Advanced configuration

Items on the right can be nested by bringing them under a Menu Group

1. Add a Menu Group from the left panel "Menu element"
2. Any Menu Item that is immediately below a Menu Group item can be nested by clicking on the right arrow icon
3. Any Menu item that is immediately below a nested Menu Item can also be nested by clicking on the right arrow icon

Live example

Custom menus#

Custom menus as required can be made available on need basis. An example of a custom menu on the areawise.app site:

Footer config#

A temporary, quick and dirty mechanism of setting a site "footer" is available. These are the items shown as the responsive footer only on Featured Pages. The footer config is defined as a json object in the editor.

The config for Footer will move under Components soon, and allow for complex Footers to be crafted.

backgroundColor = Background color of the entire Footer

color = Text color of all the text on the Footer

title = Very short text (usually the Network Site name) that should be displayed below the logo

subTitle= Short text (usually the Network Site short description) that should be displayed below text1

copyrightMsg = Any copyright message to display below the social icons

links1 = 1st column of internal or External links.

links2 = 2nd column of internal or External links.

Each column can have an optional non URL heading.

{
  "backgroundColor": "#<hex code>",
  "color": "#<hex code>",
  "divider": {
    "thickness": 2,
    "color": "#<hex code>"
  },
  "title": "<Text line 1>",
  "subTitle": "<Text line 2>",
  "copyrightMsg": "<Copyright string>",
  "links1": [
    {
      "heading": "Column 1"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    }
  ],
  "links2": [
    {
      "heading": "Column 2"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    },
    {
      "text": "Display text",
      "url": "Internal or external URL"
    }
  ]
}