Menus

A website navigation menu is a collection of links grouped together in a horizontal or vertical block. Menus are usually at the top of a website; menus can be added to the footer and side navigational bars as well.

Organized and easy-to-follow navigation for a website is very important for the overall user experience. When planning your menu, it’s important to keep in mind the information your users need to access quickly and frequently, and make those items clearly identifiable and accessible. 

Below, we review the various ways menu links can be created and some tools that can be used to enhance those menus.

CREATING MENU LINKS | SUPERFISH MENUS | NICE MENUS | MENU TARGET | SPECIAL MENU ITEMS | MENU BLOCKS | MENU POSITION | RESPONSIVE MENUS

CREATING MENU LINKS CREATING MENU LINKS

There are two ways to link pages and menus. One is selected through the page itself, while the other is added through the menu settings. Custom menus like Superfish, Nice Menus etc are also available to create drop-down menus, if your theme doesn't support drop-down menus by default.

OPTION 1 - MENU LINKS CREATED THROUGH THE PAGE

New Node: Navigate to: Content > Add Content > Page (or your content of choice)
Existing Node: Navigate to: Content >  locate the node in the  ‘Content’ list > select Edit

NOTE: If you are creating a new node, create the content for it first and then begin with step one below.

1. Scroll towards the bottom of the page, select the ‘Menu Settings’ tab and Select ‘Provide A Menu Link’
2. Complete the ‘Menu’ form:
   1. Menu Link Title - This is the title that will display in the 'Menu’
   2. Description - This will display when hovering over the link
   3. Set your ‘Parent Item’ -  A 'Parent Item' is the category that your item will be nested under, and can be a menu item, or an entire menu. Example: If you have a top level menu item called 'About Us' and a sub-menu item called 'Store History,' the parent-child relationship would be as follows:
      • ‘About Us’ - Parent Item is ‘Main Menu’
      • ‘Store History’ - Parent Item is ‘About Us’
   4. Weight - This allows you to set the location of the link in the menu. Menu links with smaller weights are displayed before links with larger weights
3. Save

Your link should now appear in the menu you selected.

Before you begin adding the link to your menu you need to know the relative path of the page. To retrieve this, navigate to the page you want to add a link for and take note of the portion of the address after ”.com/”. Example: For http://yoursite.com/store-products the relative path of the page is 'store-products'.

Existing Menu: Navigate to: Structure > Menus > Main Menu (or menu of choice)
New Menu: Navigate to: Structure > Menus > Add Menu

NOTE: If you are creating a new menu, you will have to enter a Menu Title before proceeding with step one below.

1. Select ‘Add Link’.
2. Complete the ‘Menu’ form:
   1. Menu Link Title - This is the title that will display in the 'Menu’
   2. Path - This is the path of the page you should have previously made note of. Example: store-products
   3. Description - This will display when the link is hovered over
3. Make sure the ‘Enabled’ field is selected. If not, the link will not appear in the menu.
4. Set your ‘Parent Item’ -  A 'Parent Item' is the category that your item will be nested under, and can be a menu item, or an entire menu. Example: If you have a top level menu item called 'About Us' and a sub-menu item called 'Store History,' the parent-child relationship would be as follows:
   • ‘About Us’ - Parent Item is ‘Main Menu’
   • ‘Store History’ - Parent Item is ‘About Us’
5. Weight - This allows you to set the location of the link in the menu. Menu links with smaller weights are displayed before links with larger weights
6. Save.

NOTES:

• You can also use the ‘Four Pointed Arrow’ to drag and drop links in a particular order
• If you are adding a link to an outside page, you would use the entire page URL instead of the relative path.

If this is a new menu and not one already displayed on your site you will need to display the menu.

Navigate to: Structure > Blocks

1. Find the ‘Menu’ you just created in the ‘Disabled’ sections of the blocks list
2. Set the region you wish to display it in
3. Save blocks

Menus can be displayed using blocks or from the themes settings in 'Appearance'.  If you want to use this as the main menu, you will need to switch the menu settings to make this the default menu.

SUPERFISH MENUSSUPERFISH MENUS (IndieCommerce members only)

In some cases, the menu options for your theme may not fit your needs, such as a theme that doesn’t support drop down menus. In those cases, we can offer a few custom menu modules such as Superfish or Nice menus, depending upon the allowances of your theme. These menus are enabled upon request; if you have not done so already, email [email protected] to request these custom menus modules for your site.

Navigate to: Structure > Blocks

1. Under the ‘Disabled’ section on the blocks list you should find 4 ‘Superfish/Suckerfish’ options (If you do not have these options the module is not enabled and you will need to contact us first)
2. Select ‘configure’ for one of the options (we recommend you use them in order, starting with option 1)
3. Select the ‘Menu Parent’ -  In this case, this is the menu you want to be displayed using ‘Superfish’. For example, if I wanted the ‘Main Menu’ to be displayed using Superfish Menus, I would select <Main Menu> from the list.
4. Typically, you will leave all ‘Superfish Settings’ to the default, but you may review them and adjust them to your preference
5. Place the menu in your preferred region of the theme. Drop down menus usually look good in a region at the top of the website
6. Adjust your ‘Visibility Settings’ to your preference (most often for a menu, you will leave the defaults in place)
   • Pages: You can determine which pages a block appears on. By default, we exclude some of the secure pages such as ‘cart’ for some blocks. However, you can adjust these settings to meet your site needs.
   • Content Types: If a particular block only pertains to a specific content type you can set it to display only on nodes created using that content type. For instance, you might be offering a discount on books associated with events, therefore you only want the block detailing that discount to appear on ‘Events’.
   • Roles: You can also restrict blocks to members of specific roles. Perhaps you have created a block detailing staff discounts, you could restrict it to appear only for users logged in under a ‘Staff’ role.
   • Users: You can allow your customer to determine whether or not they see a particular block when logged in. They control this setting on their ‘My Account’ page.
7. Save Block

Superfish menu is now enabled and placed on your site; it should be visible in the region you placed it in.

NICE MENUSNICE MENUS (IndieCommerce members only)

Navigate to: Structure > Blocks

1. Under the ‘Disabled’ section on the blocks list you should find 2 ‘Nice Menu’ options (If you do not have these options, the module is not enabled and you have to contact us first)
2. Select ‘configure’ for one of the options (we recommend you use them in order, starting with option 1)
3. Select the ‘Menu Parent’ -  In this case, this is the menu you want to be displayed using ‘Nice Menus’. For example, if I wanted the ‘Main Menu’ to be displayed using Nice Menus, I would select <Main Menu> from the list.
4. Set your ‘Menu Style’
   • Right: menu items are listed on top of each other and expand to the right
   • Left: menu items are listed on top of each other and expand to the left
   • Down: menu items are listed side by side and expand down
5. Place the menu in your preferred region of the theme
6. Adjust your ‘Visibility Settings’ to your preference (most often for a menu, you will leave the defaults in place)
   • Pages: You can determine which pages a block appears on. By default, we exclude some of the secure pages such as ‘cart’ for some blocks. However, you can adjust these settings to meet your site needs.
   • Content Types: If a particular block only pertains to a specific content type you can set it to display only on nodes created using that content type. For instance, you might be offering a discount on books associated with events, therefore you only want the block detailing that discount to appear on ‘Events’.
   • Roles: You can also restrict blocks to members of specific roles. Perhaps you have created a block detailing staff discounts, you could restrict it to appear only for users logged in under a ‘Staff’ role.
   • Users: You can allow your customer to determine whether or not they see a particular block when logged in. They control this setting on their ‘My Account’ page. 
7. Save Block

Nice menu is now enabled and placed it on your site; it should be visible in the region you placed it in.

MENU TARGETMENU TARGET (IndieCommerce members only)

Menu Target allows stores to choose whether or not a menu link opens in a new tab or window.

NOTE: Menu Target is enabled upon request. If you do not see the path, please email us to request the module.

CONFIGURE THE TARGET

Navigate to: Structure > Menus > Select Your Menu of Choice

1. Select ‘Edit’ for the link you want to assign a ‘target’ or select ‘Add Link’ if the link does not exist yet
2. Enable ‘Open this link in a new window’
3. Save

NOTE: This option will also be available through the ‘Menu Settings’ tab for each node.

SPECIAL MENU ITEMSSPECIAL MENU ITEMS (IndieCommerce members only)

Special Menu Items allows you to create top level menu items that are just place holders and do not link to any page, and to insert separators between menu items in a drop down menu. It provides two options to the ‘Path’ field:

• <nolink> to create menu items that don't link to any page, you will most often use this for drop-down menus, where the ‘parent’ link doesn’t actually have a link, but leads to a drop-down of child links. Instead of an <a> tag, a <span>, with a ‘nolink’ class is provided.
• <separator> to create a separator item, which is really more of a design element, used to separate menu items visually. This option generates a  <span> with an <hr> inside it, and is most useful for vertical menus.

NOTE: Special Menu Items is enabled upon request. If you do not see the path, please email us to request the module.

CONFIGURE THE MENU LINK

Navigate to: Structure > Menus > Select Your Menu of Choice

1. Select ‘Edit’ for the link you want to assign a ‘special menu item’ or select ‘Add Link’ if the link does not exist yet
2. In the ‘Path’ field, insert either <nolink> or <separator>
3. Save

If you used the <nolink> your menu item should appear without a link function. If you used the <separator> your menu should now have visual dividers.

CONFIGURE THE SPECIAL MENU ITEM CSS
After using the special menu item <nolink>, you may notice that its style differs from the other menu items. You can mimic the same style by altering the corresponding CSS.

Navigate to: Configuration > System > Special Menu Items

1. HTML tag for 'nolink' - set this to <a>
2. Save

Your <nolink> link should now have the same format as the rest of your menu.

MENU BLOCKSMENU BLOCKS (IndieCommerce members only)

Menu Blocks make it possible to create a block based on an existing menu that displays menu trees starting with any level and going to any depth. In the example below, we’ll take a horizontal main menu, that only displays the parent links and use it to add a sidebar menu, that displays the child links as well.

NOTE: The Menu Block module will be enabled on IC sites upon request. If you do not see the path, please email us to request the module be enabled.

CONFIGURE THE MENU BLOCK

Navigate to: Structure > Blocks > Add Menu Block

1. Block title - This title will be displayed to site visitors, if you do not want to display a title use <none>
2. Administrative title - This will only be displayed to site admins
3. Menu - Set the menu you are basing the block on
4. Starting Level - This is the first depth of links that will appear, for instance, if you want to start with your parent links, choose 1, if you want to start with your child links, choose 2. Blocks that start with the 1st level will always be visible. Blocks that start with the 2nd level or deeper will only be visible when the trail to the active menu item is in the block’s tree.
5. Maximum Depth - This is how many levels of links you want to display, for instance, if you have parent links, child links and grandchild links and only want to display the parent and child links, the maximum depth should be 2
6. Set the region - this is area where the block will be displayed on your site
7. Save

The block should now appear in the region it was assigned and display only the links selected.  

MENU POSITIONMENU POSITION (IndieCommerce members only)

The Menu Position module allows you to set up rules that tell your website where each content type created should fall in the site's hierarchy. Those rules, then display as ‘breadcrumbs’ to your site visitors providing them with a visual indicator of where on your site they are.

NOTE: The Menu Position module will be enabled on IC sites upon request. If you do not see the path, please email us to request the module be enabled.

CONFIGURE A RULE
For the example below, we configure a rule to add an ‘Event’ breadcrumb to all event nodes.

Navigate to: Structure > Menu Position Rules > Add Menu Position  Rule

1. Administrative title: this title will only be displayed to site admins - Example: Event nodes
2. Parent menu item: this is the menu item your ‘Event nodes’ should appear under - Example: Event
3. Conditions: set the condition that needs to be met for this rule to be triggered. Example: Content types - Event There are 4 types of conditions that could be set to trigger the rule:
   • Content Types - will trigger the rule if the node belongs to the selected content type
   • Pages - will trigger the rule if the specific page path is listed here
   • User roles - will trigger the rule for specific roles
   • Taxonomy - will trigger the rule only if the node is tagged with a specific taxonomy term
4. Save

Now when a site visitor views a Event page, instead of the breadcrumb only reflecting ‘Home’ it will reflect ‘Home>> Events’

CONFIGURE MENU POSITION SETTINGS

Navigate to: Structure > Menu Position Rules > Settings

By default, the option to ‘Insert the current page's title into the menu tree’ is selected.  If you are focusing on theming design, you may want to enable ‘Mark the rule’s parent menu item as being active’ instead.

RESPONSIVE MENUSRESPONSIVE MENUS (IndieCommerce members only)

The Responsive Menus module allows you to turn any menu into a responsive menu, that means, even if the theme you have chosen to use doesn’t support responsive menus by default, you can make it do so (the theme you have selected, does need to be a responsive theme). This is important because users will have a difficult time navigating your website if the menu hasn’t been optimized for smaller devices such as tablets and mobile phones.

NOTE: The Responsive Menus module will be enabled on IC sites upon request. If you do not see the path, please email us to request the module be enabled.

AVAILABLE STYLES
Though there are 5 available styles to choose from we are only recommending the ‘Simple expanding’ style.

CONFIGURE THE RESPONSIVE MENU

Navigate to: Configuration > User Interface > Responsive Menu

1. Set the ‘Responsive menu style’ to the style of your choice
2. Provide the ‘Selectors for which menus to responsify’, this is the main wrapping element for your menu, in some cases .main-menu will work, however, because every theme defines block and menu elements differently that is not always the case. Using the ‘Inspect Element’ on your front page you can locate the name of the main wrapping element:
3. Right click on your website and select ‘Inspect Element’
4. Select the ‘Inspect tool’
5. Move your mouse over your main navigation
6. Look for the ‘Nav ID’ - Example: <nav id="navigation" role="navigation">
7. Copy the nav id and paste is with a hashtag into the ‘Selectors for which menus to responsify’ field Example: #navigation
8. Set the ‘Screen width to respond to’ - this is the width in which the menu will become responsive, 760 is a common setting as it covers a wide range of devices.
9. Save

NOTE: Themes with responsive menus already built in may not work well with this module.