HomeDevelopmentDropdown Top Menu Navigation

Dropdown Top Menu Navigation

I was working on a new theme on WebSphere Portal. One of the theme improvement is to include dropdown menu on the top menu bar. The requirement is to have a 2 level top menu navigation.

Below are some sites with 2 level top menu navigation.

1) IBM site have a conventional mouse over on the top menu to show the 1st level navigation. Mouse over on certain 1st level navigation will expand the 2nd level navigation.


2) Toshiba provides similar 2 level navigation. They included some animation when displaying the menu.


3) Samsung takes a different approach and list down both 1st and 2nd level navigation is a wider dropdown area.

Both Toshiba and Samsung offer quite similar range of product. On Toshiba site, users will need to hover over the 1st level navigation to see the 2nd level items. On Samsung site, users can see the full list of items and have quick access to the pages directly.

Quite a number of site are using this approach. It is well suited if there is a small number of pages in each level. I’m using this approach for the current theme for my client.

In the next article, I’ll detail down how I implemented it on the WebSphere Portal Server theme.

Written by

The author didnt add any Information to his profile yet