痳豆在线

Skip to content
Web Strategy Documentation Library

Menu best practices and features

Information architecture v. menu structure

Information architecture (IA) is the structural design, organization and content labeling on your site. In WordPress, pages can be nested under ‘parent’ pages which contributes to the IA. In our WordPress theme if you set up your IA with nested pages it will automatically display as a sidebar menu for the pages that are a part of that structure you’ve built. (An example can be seen in the sidebar of this page.)

Your menu structure is what is being displayed in the main, white menu area and additional purple, audience menu area. In the UW WordPress theme you are able to have a different menu structure from your IA, though varying it too much is not recommended. The closer the match between your IA and menu structure, the better the user experience (UX) and search engine optimization (SEO) for your site and users. Menu best practices would be to have the menu structure match the IA, or as close as you can that still makes sense for your users.

Recommendations for menu items

Recommendations for menu items

In order to not overwhelm users, it’s generally recommended to limit the number of menu items in a dropdown to 6-8 items. If a menu section is starting to get long, leveraging our Mega Menu feature is a great way to break up a long list of say, 12 items, to two lists of six items within that dropdown. This way it’s a lot easier for users to consume and navigate through your menu structure.

In general creating page titles that make sense for your users is super important for their own understanding and navigation of your site overall. This carries through to your menu and the menu item labels you use. Remember, just because you understand what you are saying doesn’t mean your site visitors will. Stick with short, descriptive page titles that provide enough context for your users and try to avoid ‘inside baseball’ language unless that would actually make sense for the majority of your site visitors. For example, the Web Strategy Documentation Library is meant for website builders of all skill levels and needs, not just developers. Because of this, we do our best to keep menu items labels (and page titles) more open to the broad range that this site serves. If we only focused on developers, the labels would probably be far more technical in nature and potentially harder for a new builder who only modifies their site rarely.

Another way to help improve the UX of your site’s menu is to include action-oriented language when appropriate. Instead of ‘Registration’ as your menu item label, something like ‘Register for courses’ conveys more meaning and prompts the action that would be taken if the user visited that page.

In the WordPress theme page titles will be the default menu item label when added to the menu. You are able to modify them to something else that works better for the menu space but we recommend not going too far as this may be disorientating for users and it will also hurt search engine optimization (SEO) and website performance.

Sometimes you’ll have content that you want to link to but it lives on a different site. To help users understand that they are leaving your site and headed to another, adding an external link icon next to that menu item can help clear up confusion. An example of this can be seen in the menu of this site next to ‘UW Web Checklist’.

To add an external link icon next to the menu item in the WordPress theme:

  1. Make sure that CSS classes are activated on your WordPress site in ‘Screen Options’
  2. When viewing your menu in the backend, open up the dropdown of the menu item in question
  3. In the ‘CSS Classes (optional)’ section type ic-external, the code for our external link web icon
  4. Save the menu changes

Navigation menu options for WordPress theme

For more in-depth information about the navigation menu options please visit the .

Default (classic uw-2014)

This is an updated version of the classic UW-2014 theme’s menu. This will look familiar if you have used this theme before. To build your menu, go to Appearance > Menus. Create a menu and set it to Display Location: White Bar.

Mega Menu

This is a menu system that allows for up to three columns of menus with sections. In order to use Mega Menus you must first activate it in ‘UW Theme Settings’. Build your navigation menu in the WordPress admin (Appearance > Menus) as you normally would with top-level items and drop-down items nested below. Set it to Display Location: Mega Menu.

**Note: This site you are on currently leverages Mega Menu

Audience menu (purple bar)

This is the secondary menu which is referred to as ‘audience menu (purple bar)’聽 in the WordPress admin. While the default is audiences, it can be customized to feature related links instead. Best practice is to only use this for linking off of your site. For the docs site, it means linking to places like Accessible Technology and the UW Brand site.

 

Additional menu features

Add a button or icon button

**Note: This feature is available in the WordPress theme for both the default and Mega Menu options

To add a button or an icon button to the top-level navigation menu as seen with the ‘Home’ menu button on this site:

  1. Make sure that CSS classes are activated on your WordPress site in ‘Screen Options’
  2. When viewing your menu in the backend, open up the dropdown of the top-level menu item in question
  3. In the ‘CSS Classes (optional)’ section type button
  4. To add an icon, use any of the web icons available in our theme. For example, if you wanted the little house icon you’d type ic-home without the period in front of it.
  5. Save the menu changes

The default button is purple background with white text. To change to a dark gold button, add darkgold in the CSS Classes. To change to a gold button, add gold instead.

Add a heading style to your Mega Menu

With the Mega Menu option you are able to create sections within your menu dropdowns, as seen on this site. We don’t recommend

If you are wanting to add a heading style:

  1. Make sure that CSS classes are activated on your WordPress site in ‘Screen Options’
  2. When viewing your menu in the backend, open up the dropdown of the menu item in question
  3. In the ‘CSS Classes (optional)’ section type heading
  4. Save the menu changes