Creating Custom Menus

You can override your site's automatically generated menus if customization is needed.

For most websites, we recommend using the theme’s automatic menu builder instead of a custom menu. However, depending on your goals, you may have good reason to create a custom menu for your site.

 

Reasons for creating custom menus

Shortening page names

If you have a long page name or crowded main menu, you may want to abbreviate a page title as it appears in the main menu. For example, a page titled “Seminars & Conferences” could appear as “Events” in the main menu.

Note that editing a page label only changes how it appears in the main menu and dropdown menus; the sidebar and mobile menus will not receive the custom labels.

Hiding pages from the navigation

In general, every page should appear somewhere in the navigation. In rare cases, however, you might have good reason to keep a page out of the menu. These exceptions might include a confirmation page that should be seen only after a form is submitted, or a secret page that will be shared only via an email with a link.

Keep in mind: Pages hidden from the navigation may still appear in search results, including site search and Google. 

Eliminating dropdown menus

Though it’s possible to create a main menu with no dropdowns, we advise against it. Dropdown menus are a key navigation element that provide a consistent experience across all WashU Web Theme sites.

If a section has lots of subpages, thus making the dropdown menu too long, consider restructuring your site. You might break off part of the extra-long section into another section, or migrate that content into news posts or items instead of pages.

Linking off-site

We advise against including off-site links in your site menus, except in rare circumstances. The Office of Human Resources menu, for example, includes a link to HRMS, a system employees use to complete essential tasks. HRMS is a core HR application and many site visitors (prospective employees not included) will recognize it as an off-site property before clicking it.

If you’re considering an off-site menu link, weigh the risks and benefits of sending visitors to another property straight from your main menu. Typically, it’s better to include off-site links within the content of your pages. If you’re simply listing websites for related groups, you can create a link list in the footer instead.

Reasons to avoid custom menus

Custom menus aren’t all puppies and sunshine. We don’t have a laundry list of reasons to avoid customization, just one important warning.

Extra maintenance ( = additional risk)

A non-custom menu is certainly the simpler way to go. Using the theme’s automatic menu, all you have to do is to set the page’s parent, and order it amongst the other child pages.

With custom menus, however, you have to 1) set the page’s parent and order and 2) add the page to the separate custom menu builder.

The risk is remembering both steps every time you add a new page or update the menu. Forget the first part, and the sidebar menus and page URLs don’t match the perceived site structure. Forget the second, and the new page won’t appear in the main menu.

Of course, remembering both steps can be simple enough, especially if just one person manages your website and is an expert in all of the ins and outs. Custom menus are a greater risk for sites that are only frequently updated or that are updated by multiple people.


Creating a custom menu

The custom menu builder controls a site’s header menu, including dropdowns, and the mobile menu. It does not control the sidebar menus, which must be edited separately. (Learn all about site menus in the WashU Web Theme.)

Switch from default menu to custom

  • Go to Dashboard > Appearance > Menus.
  • At the bottom of the page under Menu Settings, next to Display Location, check Main Menu.
  • If you do not see that option, first click the button Create Menu.

Do not click Save Menu until you are ready for your custom menu to replace your existing one.

The custom menu won’t go into effect (be visible to site visitors) until you check Main Menu next to Display Location and click Save Menu.

Add pages to the menu structure

The pages that will appear in your site’s header menu are listed under Menu Structure. You can add any page on your site to the menu.

  • Find the Pages box on the left.
  • Check the boxes next to pages to add to the menu.
  • Click Add To Menu.
  • The pages will be added to the bottom of the menu.

Pro tip: Pages on the left are listed under three tabs: Most Recent, View All and Search.

Drag and drop pages to set menu order

Under Menu Structure, drag and drop pages into the order you want them to appear.

Top to bottom = Left to right

Dragging the About page to the top of the list makes it the first page listed in the main menu. Similarly, dragging and dropping the Contact page to the bottom of the list will make it the last page listed in the main menu.

Create dropdown menus by indenting child pages under the parent

To ensure that subpages show up correctly in the dropdown menus, “nest” them with one indent.

Though it’s possible to indent pages more than one level, doing so will cause the page to drop off the menu. On the other hand, if you miss an indent, the page will appear as a top-level page instead of in the dropdown.

In this example, you can see how indenting child pages builds dropdown menus. Child Page C wasn’t indented so it appears in the primary menu instead of the dropdown.

Remove unwanted pages

To remove a page from the menu, click the down arrow to the right of the page name, then click Remove.

Edit a page name

If a page has a long name, you my want to truncate the title as it appears in the site menu.  For example, you could shorten “About the Department of English” to “About Us.” The full name will still display as the title when someone views that page.

To edit the label, click the arrow to the right of the page name and edit the Navigation Label.

Save changes

Click the Save Menu button (either one).

Edit the sidebar menus

Because the custom menu controls only the header menu, the sidebar menus have to be edited separately. The sidebar menus and dropdown menus should match.

Edit the sidebar menu »

Check your work

  • Inspect the main menu, and hover over all page titles to view the dropdown menus. Check that everything is in order.
  • Make sure your most important pages appear in the menu when viewed on a typical desktop monitor. If a menu includes more pages than display, pages will shift into a “More” dropdown at the right of the menu bar, as shown in the screenshot below.
Screenshot of header menu from a sample website showing six pages in horizontal stripe, and three more pages in a dropdown labeled MORE.

Depending the length of page titles, the main menu typically shows five to seven pages. The remaining pages collapse into a dropdown labeled “More.” As the window narrows, additional pages progressively drop into “More.”

Screenshot shows that the same pages may appear in a different order in the dropdown menu and the sidebar menu.

In this screenshot, the dropdown menu has been updated via the custom menu builder, but the sidebar menu, which is determined by the page order, was not updated to match.

 


 

Reverting to the default menu

It’s simple to switch to the default menu. In doing so, your header menu will be controlled by page order, which already controls your sidebar menus.

Before you switch to the default menu

The default menu will go live immediately, so make sure it’s ready to go!
Edit the site menus »

De-activate the custom menu

  • Go to Dashboard > Appearance > Menus
  • Under Menu Settings, next to Display Location, un-check Main Menu

Screenshot shows location of "Display location" checkbox below Menu Structure.

Save your changes

Click the Save Menu button (either one).

That's it!

We told you it was simple. To reactivate the custom menu, simply return to the Menus page, and re-check the Main Menu box.