Set up a menu heading that only opens a dropdown

A top-level item in the main menu can hold a dropdown of other items. This article covers the heading item only. For building the menu itself, see Setup navigation menus. On most intranets only administrators can edit menus; your site’s set-up may differ.

Decide whether the menu heading needs its own page

Since Govintra 5.3.48, selecting a menu heading that has a dropdown only opens and closes the dropdown. It never follows the heading’s own link. So:

  • The heading is just a label (for example “How do I?”) with no page of its own. Use a Custom Link with # (the hash character) as the URL. This is the usual choice.
  • The heading has a real page that visitors need to reach. Put that page in the dropdown as the first item, because the heading itself will not take visitors there.

Add a menu heading that only opens a dropdown

  1. Go to Appearance, Menus and open the menu assigned to Primary Navigation.
  2. In the panel on the left, expand Custom Links.
  3. In URL, replace the default text with a single # (the hash character).
  4. In Link Text, type the heading as visitors should see it, then select Add to Menu.
  5. In Menu structure, drag the items that belong in the dropdown underneath the heading and slightly to the right, so they are indented one level.
  6. Select Save Menu.

Visitors see the heading with a small chevron after it. Selecting the heading opens the list beneath it; selecting it again closes it. Because the URL is #, the heading can never send a visitor to an empty or wrong page. The theme treats a # heading like any other dropdown heading: what makes an item a heading is having items indented under it, not its URL.

Only one level of dropdown is supported. Items indented two levels deep are not shown.

Use a real page as the menu heading

A page can be a dropdown heading instead of a Custom Link, but an ordinary selection of the heading still only opens the dropdown. Visitors can reach the page in three ways:

  • Hold Ctrl (Cmd on a Mac) while selecting the heading. The page opens in a new tab.
  • Select the heading with the middle mouse button. The page opens in a new tab.
  • Add the same page to the dropdown as its first item.

Few visitors know the first two, so always do the third. Give the entry a clear Navigation Label, such as “About us overview”.

How a dropdown menu heading behaves since Govintra 5.3.48

  • Open: select the heading, or move to it with Tab and press Enter or Space. Hovering does not open it. Opening one dropdown closes any other.
  • Close: select the heading again, press Escape (focus returns to the heading), select anywhere else on the page, or Tab out of the dropdown.
  • Moving the mouse away does not close it. It stays open until one of the actions above.
  • Keyboard: once open, Tab moves through the dropdown’s links in order. Arrow keys are not used.

Before 5.3.48, a second selection of the heading followed its link, which with a # URL jumped to the top of the page. The secondary navigation, where a site has one, has the same dropdown behaviour.

Dropdown menu headings on phones and small screens

On screens narrower than 768 pixels the main menu is hidden behind a menu button (three horizontal lines) in the header. Selecting the button shows the menu as a vertical list. Dropdown headings work as on a desktop: tap the heading and its items appear indented beneath it, inside the list; tap again to hide them. A # heading and a page heading behave the same here. The menu button, Escape or a tap outside the menu closes the whole menu.

Add a comment