11

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.

Improve this question
8
  • 4
    There isn't any such formatting. Why do you feel there should be?
    – Martijn Pieters
    Commented Aug 16, 2013 at 12:27
  • 9
    Note that <kbd> is strictly speaking not Markdown. It is a permitted HTML tag instead.
    – Martijn Pieters
    Commented Aug 16, 2013 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
    Commented Aug 16, 2013 at 12:29
  • 6
    If the menu was so confusing that you needed some visual display instead of just text, why not screenshot then?
    – ಠ_ಠ
    Commented Aug 16, 2013 at 12:29
  • 3
    @axrwkr, can you provide an example of the content you want to format that way?
    – Frédéric Hamidi
    Commented Aug 16, 2013 at 12:30
  • 2
    I use _File > New_ to give File > New
    – hjpotter92
    Commented Aug 16, 2013 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 Staff
    Commented Aug 16, 2013 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
    Commented Aug 19, 2013 at 11:14

2 Answers 2

Reset to default
8

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

Improve this answer
2
  • 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 - on strike
    Commented Aug 16, 2013 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
    Commented Aug 16, 2013 at 17:54
3

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.

Improve this answer
5
  • 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
    Commented Aug 16, 2013 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
    Commented Aug 16, 2013 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
    Commented Aug 16, 2013 at 20:33
  • It's fine to uses characters other then pipe (|) as the <kbd> delimiter.
    – Aldrik
    Commented Aug 16, 2013 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
    Commented Aug 16, 2013 at 20:45

You must log in to answer this question.