Tutorial: Creating a drop-down menu link

You can create and use drop-down menus, or nested menus, to enhance the use of your Developer Portal .

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this tutorial, you create a drop-down menu link on the Main navigation menu.

Note:

Although drop-down menu links can be created in the Developer portal, the drop-down menu doesn't expand by default. To make the drop-down menu expand, you need to use the Superfish module.

This tutorial takes you through the following steps:
  1. Add menu links to the main navigation menu.
  2. Make the drop-down menu expand by using the Superfish module.

The front page Main navigation displays like this before the changes are made. A screenshot of the original front page

Add menu links to the main navigation menu

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Structure > Menus > Main navigation > Add link
  4. Enter API's in the Menu link title. Enter /api in the Link. Check Show as expanded, then click Save.
    Note: Ensure Show as expanded is checked as this is the parent link for the submenu links.
  5. Add another menu link to the main navigation menu. Enter API One in the Menu link title. Enter /product/10/api/5 in the Link. Select -- API's in the Parent link, then click Save. Shows page to add API One
  6. Add another menu link to the main navigation menu. Enter API Two in the Menu link title. Enter /product/10/api/9 in the Link. Select -- API's in the Parent link. Select 1in Weight, then click Save. shows page to add API Two
  7. Navigate to Structure > Menus > Main navigation. The hierarchy of the menu links now looks like this: shows the menu link order for main navigation
  8. Navigate to the home page. The APIs menu link that you added to the main navigation menu does appear, but the submenus links don't expand when you hover over it. Main menu with API's link

Make the drop-down menu expand by using the Superfish module

To make the drop-down menu expand when you hover over it, you need to use the Superfish module and configure the Block Layout.

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Extend. Search for superfish, check the Superfish box, click Enable.

    shows the enable superfish page

  3. Navigate to Structure > Block layout.
  4. Click Configure, and select Disable for the Main menu block.shows the page to disable the main menu
  5. Click Place block for Navigation, Then search for main navigation in the box. The filtered results might show two or more options. Click Place block for the Main navigation with the Category Superfish.

    shows custom block page

  6. Deselect Display title, click Save block.

    shows the configure block page for main navigation

  7. Drag Main navigation to be under Site branding.

    show main navigation in the list for the block

  8. Click Save blocks.
  9. Navigate to the home page. The APIs menu link that you added into the main navigation menu does now expand when you hover over it.

    show the final main menu with the update

What you did in this tutorial

You created a drop-down menu link on the Main navigation menu.

What to do next

You can consider any other uses of the drop-down menu to enhance your users experience on your Developer Portal.