Menu shortcode can be used to create additional static menus for pages, posts or widgets.
Due to limitations with WordPress shortcodes menus can't nest more than once (item -> subitem).

[menu] shortcode arguments
classes:
Type -
[primary|secondary|pointing|tabular|text|pagination]
Axis -
[horizontal|vertical]
Count -
[two item|three item|...]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Float -
[left floated|right floated]
Icon -
[icon|labeled icon]
Mobile -
[stackable]
Other -
[compact|inverted|evenly divided|fluid|borderless|fixed]
[item] shortcode arguments
classes:
State -
[active|disabled]
Menu -
[dropdown]
href:
The href/url/link argument can be used to specify a link.
icon:
Name of the icon to use.
header:
Lists only: Header text.
image:
Lists only: Image link to use.
Vertical menu
<menu vertical>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item active url="#">Active menu item</item>
  <item url="#" icon="globe">Menu item 4</item>
  <item>Menu item without link</item>
</menu>
<menu horizontal>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
  <item url="#">Menu item 5</item>
</menu>
<menu five item horizontal>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
  <item url="#">Menu item 5</item>
</menu>
Notes
To divide menu items evenly, an item count needs to be specified
<menu vertical>
  <div item>
    <header tiny marginless>Header</header>
    <submenu>
      <item url="#">Menu item 1</item>
      <item url="#">Menu item 2</item>
      <item url="#">Menu item 3</item>
      <item url="#">Menu item 4</item>
      <item url="#">Menu item 5</item>
    </submenu>
  </div>
  <div item>
    <header tiny marginless>Header</header>
    <submenu>
      <item url="#">Menu item 1</item>
      <item url="#">Menu item 2</item>
      <item url="#">Menu item 3</item>
      <item url="#">Menu item 4</item>
      <item url="#">Menu item 5</item>
    </submenu>
  </div>
</menu>
<menu inverted vertical>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
  <item url="#">Menu item 5</item>
</menu>
<menu vertical>
  <item url="#">Menu item 1</item>
  <div ui dropdown item>
    Dropdown item
    <icon dropdown>
    <submenu>
      <item url="#">Menu item 1</item>
      <item url="#">Menu item 2</item>
      <item url="#">Menu item 3</item>
      <item url="#">Menu item 4</item>
      <item url="#">Menu item 5</item>
    </submenu>
  </div>
  <item url="#">Menu item 2</item>
</menu>
Notes
Div shortcode is used for dropdown item because same shortcodes cannot nest.

Leave a Reply

Your email address will not be published. Required fields are marked *