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.

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

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.