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. Navigate to Structure > Menus.
  3. From the title list, find Main navigation. Click the arrow icon beside Edit menu and select Add link.

    Select Add link from the dropdown

  4. Complete the following steps to add a new menu link:
    1. In the Menu link title field, enter APIs.
    2. In the Link field, enter /api.
    3. Under Display settings, select the Show as expanded checkbox.
    4. Click Save to save the changes.

      Page to add new menu link

      Important: Ensure Show as expanded checkbox is selected as this is the parent link for the submenu links.
  5. Complete the following steps to add another menu link to the main navigation menu:
    1. On the Edit menu Main navigation page, click +Add link.
    2. In the Menu link title field, enter API One.
    3. In the Link field, enter /product/10/api/5.
    4. Under Parent link, select -- APIs.
    5. Click Save to save the changes.

      Page to add API One

  6. Complete the following steps to add another menu link to the main navigation menu:
    1. On the Edit menu Main navigation page, click +Add link.
    2. In the Menu link title field, enter API Two.
    3. In the Link field, enter /product/10/api/9.
    4. Under Parent link, select -- APIs.
    5. Under Display settings, select 1in the Weight field.
    6. Click Save.

      Page to add API Two

  7. The hierarchy of the menu links now looks like this:

    Displays the menu link order for the 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. Click Extend.
  2. In the Filter field, enter superfish and select the Superfish checkbox.
  3. Click Enable to enable the module.

    Shows the enable superfish page

  4. Navigate to Structure > Block layout.
  5. Under Block, find Main menu, click the arrow icon beside Configure, and select Disable.

    Shows the page to disable the main menu

  6. Click Place block for Navigation and 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 content block page

  7. Clear the Display title checkbox and click Save block.

  8. Drag Main navigation to be under Site branding.

  9. Click Save blocks to save the changes.
  10. 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.