9

Is there a markdown syntax for menu options?

For example if I want to express a keyboard shortcut I can use

<kbd>Ctrl</kbd> + <kbd>C</kbd>

to get Ctrl + C

Is there a way to express a menu option such as File → New but using markdown.

I checked the the Markdown Help and the official markdown synax but I can't see anything that looks like menu item formatting.

  • 4
    There isn't any such formatting. Why do you feel there should be? – Martijn Pieters Aug 16 '13 at 12:27
  • 9
    Note that <kbd> is strictly speaking not Markdown. It is a permitted HTML tag instead. – Martijn Pieters Aug 16 '13 at 12:28
  • @MartijnPieters in the same way that keyboard formatting helps to make the keyboard shortcuts stand out, menu formatting would help to make the menu options stand out, making them easier to locate in a block of text – user241462 Aug 16 '13 at 12:29
  • 6
    If the menu was so confusing that you needed some visual display instead of just text, why not screenshot then? – ಠ_ಠ Aug 16 '13 at 12:29
  • 3
    @axrwkr, can you provide an example of the content you want to format that way? – Frédéric Hamidi Aug 16 '13 at 12:30
  • 2
    I use _File > New_ to give File > New – hjpotter92 Aug 16 '13 at 12:44
  • 1
    Right, use a screenshot if showing it in text is cumbersome. Also maybe put it in its own paragraph, blockquote or code block if you need it to stand out. I personally don't like a lot of the in-paragraph formatting because it doesn't look great and it makes the line height inconsistent on most sites in the network (I want to say all but I'm not sure). – Aaron Bertrand Aug 16 '13 at 17:57
  • 1
    @FrédéricHamidi I decided to use &rarr; in my question Display seconds in addition to hours and minutes on the Clock – user241462 Aug 19 '13 at 11:14
7

The <kbd> tag is not limited to keyboard shortcuts. The spec suggests using this tag for marking-up menu input:

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

Example Code:

Here the kbd element is used to indicate keys to press:

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

Such precision isn't necessary; the following is equally fine:

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

So for the given example you'd use <kbd>File | New</kbd> which (with current site styling) renders as: File | New

  • 5
    This may be true, but the spec is intentionally not assuming any particular styles/formatting. Practically, however, you have to consider that, especially on a site whose styles you do not directly control. The <kbd> tag is rendered in a certain way, regardless of its semantic meaning, and I do not think that rendering is appropriate for menu items. Something like File &rarr; Open is sufficient and less ugly. – Cody Gray Aug 16 '13 at 13:14
  • 1
    Also note that the example you use is fairly simple and common so everyone will recognize it. What about other menu items with several submenus? – user226253 Aug 16 '13 at 17:54
2

There isn't any and as Aldik says, <kbd> can be used for this, but in my experience, it is messy and lines of them quickly make the post look odd.

I think it is perfectly fine to denote menu items with italics and angled brackes for eg:

View > Syntax > OpenGL Shading Language > GLSL. Not only is this easier to read than View | Syntax | OpenGL Shading Language | GLSL but it also gives users a logical flow of where to go.

  • 1
    When using <kbd> for menus, I prefer using a separate tag for each level. <kbd>View</kbd><kbd>Syntax</kbd><kbd>... Pipes as separator is unnecessarily ugly. – CodesInChaos Aug 16 '13 at 17:56
  • 1
    @CodesInChaos Those look like just plain buttons. You see the problem here now.. I think it is best to leave <kbd> to shortcut keys, buttons only etc. (at least here on SE). – user226253 Aug 16 '13 at 17:58
  • 2
    I doubt the kbd tag was intended to span multiple words, the whole tag disrupts the flow of a sentence that way. – zeffii Aug 16 '13 at 20:33
  • It's fine to uses characters other then pipe (|) as the <kbd> delimiter. – Aldrik Aug 16 '13 at 20:44
  • @Aldrik you are missing the point here, drifting from your examples, its usage for menu items just doesn't fit, even if you use >, - or ascii arrows. – user226253 Aug 16 '13 at 20:45

You must log in to answer this question.