At several times in the past while writing software documentation -- including user manuals, user stories, bug reports, test cases, and emails to users/colleagues -- I've needed to be able to refer to items inside a menu. Sometimes ones nested several submenus deep.

I've seen and/or used several styles in the past:

  • Path-separator-like symbols: /, \, :, >, >>, ->, or |, as in "Select Tools > Options > Graphics."
  • Running menu layers together with commas as in "Select Tools, Options, Graphics," optionally with a sequence word/phrase in between as in "Select Tools, followed by Options, followed by Graphics."
  • Inverted, as in "Under Tools, select Options" but it gets awkward if there's another layer of menus: "Under Tools, select Options, and under Options, select Graphics."
  • Unicode symbols: • (0x2022 bullet), → (0x2192 right arrow), ⟩ (0x27E9 right angle bracket), ► (0x25BA Black right-pointing pointer), and I'm sure there are others.
  • Images containing similar symbols when the medium supports it.
  • When writing a list of steps, breaking each menu layer out into a separate step (as below). This adds a lot of noise for what is really a single, logical action.
    1. Select Tools
    2. Select Options
    3. Select Graphics

So, my question: is there an industry standard way to depict the relationship between menu and item/submenu? If not (and I suspect not), is there one convention that is more accepted or frequently used than the others? Is it just not a big deal, and I'm overthinking things?

  • If you can't easily explain your UI workflow in text, how about using more partial screen-grabs and images? It's generally easy for users to be able to relate to an image which displays the same thing as they're seeing on their screen – Ben Cottrell Mar 23 '17 at 22:17
  • Furthermore, if you think your documentation may be confusing to users, then it probably means that the UI itself is not intuitive, in which case consider a more fundamental re-think about the way your users are expected to interact with it. This is common for systems which rely too heavily on menus; you might consider having fewer menus and think up alternative ways for users to perform the tasks they need instead. – Ben Cottrell Mar 23 '17 at 22:21
  • @BenCottrell Very good points! A picture says 1000 words. I also try to avoid hiding things away in menus when I'm designing a UI, but a lot of time I'm fighting against historical inertia in legacy apps or have had the UI decisions already made and simply flowed down to me. (The idea for this question came from the need to document a Visual Studio extension, and Visual Studio is quite menu-heavy). – user266462 Mar 24 '17 at 12:59

I can't find a recommended standard skimming the Windows and OS X style guidelines.

The one I'd commonly use is to use a solid triangle to indicate a sub menu, as is done in the UI itself on Windows and Ubuntu and OS X, and probably many others.

some menus

so I might write "Uncheck TEST ► Test Settings ► Keep Test Execution Engine Running"

It's not entirely consistent - the UI itself doesn't have a marker on the top-level menu, but when writing I still use it.

  • I guess I'd never really noticed those little icons before, at least on a conscious level, but perhaps that's the point. I like the idea of the documentation using the same symbol (well, a very similar symbol) as the UI itself. Upvoted (but I guess it won't show until I hit15 rep). – user266462 Mar 24 '17 at 13:07
  • Accepted this answer as it was ultimately the approach I took. (Apologies for the long delay.) – user266462 Dec 12 '17 at 23:33

The only way to communicate is the way everyone recognizes. I use, and see, 'Menu 1 > Menu 2' more frequently than any other technique. This makes it a de facto industry standard.

For a more professional fell, I would use '→'. Simply because it's not on the keyboard, thus making yourself look like a wizard.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy