Menu

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.
active:
Wildcard pattern to match with the current URL. If match is found .active class is added.
<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>
  <item disabled url="#">Disabled menu item</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>
</menu>
<menu secondary>
  <item url="#">Menu item 1</item>
  <item active url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
</menu>

<menu vertical secondary>
  <item url="#">Menu item 1</item>
  <item active url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
</menu>
<menu secondary pointing>
  <item url="#">Menu item 1</item>
  <item active url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
</menu>

<menu vertical secondary pointing>
  <item url="#">Menu item 1</item>
  <item active url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
</menu>
<menu horizontal stackable>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item url="#">Menu item 3</item>
  <item url="#">Menu item 4</item>
</menu>
Notes
Adding the .stackable class will make the menu responsive on smaller devices.
<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.
<menu tabular>
  <item url="#">Menu item 1</item>
  <item url="#">Menu item 2</item>
  <item active url="#">Active menu item</item>
</menu>

<menu vertical tabular>
  <item url="#">Menu item</item>
  <item active url="#">Active menu item</item>
  <item url="#">Menu item</item>
</menu>
Attached tabular menus

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<menu top attached tabular>
  <item url="#">Menu item</item>
  <item active url="#">Active menu item</item>
  <item url="#">Menu item</item>
</menu>
<segment attached>
  <lorem>
</segment>
<menu bottom attached tabular>
  <item right url="#">Menu item</item>
  <item right active url="#">Active menu item</item>
  <item right url="#">Menu item</item>
</menu>
<menu text>
  <item header>Sort by</item>
  <item active url="#">Closest</item>
  <item url="#">Most comments</item>
  <item url="#">Most popular</item>
</menu>

<menu vertical text>
  <item header>Sort by</item>
  <item active url="#">Closest</item>
  <item url="#">Most comments</item>
  <item url="#">Most popular</item>
</menu>
<menu vertical>
  <item url="#">
    <header marginless tag="h4">Promotions</header>
    <p>Check out our new promotions</p>
  </item>
  <item url="#">
    <header marginless tag="h4">Coupons</header>
    <p>See our collection of coupons</p>
  </item>
  <item url="#">
    <header marginless tag="h4">Rebates</header>
    <p>Visit our rebate forum for information on claiming rebates</p>
  </item>
</menu>
Header item, right items, buttons
<menu horizontal stackable>
  <item header>Brand name</item>
  <item url="#">Menu item</item>
  <item active url="#">Menu item</item>
  <item right><button primary>Sign up</button></item>
  <item right><button>Log in</button></item>
</menu>
Icon menu
<menu icon>
  <item url="#"><icon gamepad></item>
  <item url="#"><icon video camera></item>
  <item url="#"><icon video play></item>
</menu>

<menu vertical icon>
  <item url="#"><icon gamepad></item>
  <item url="#"><icon video camera></item>
  <item url="#"><icon video play></item>
</menu>
<menu labeled icon>
  <item url="#">
    <icon gamepad>
    Games
  </item>
  <item url="#">
    <icon video camera>
    Channels
  </item>
  <item url="#">
    <icon video play>
    Videos
  </item>
</menu>

<menu vertical labeled icon>
  <item url="#">
    <icon gamepad>
    Games
  </item>
  <item url="#">
    <icon video camera>
    Channels
  </item>
  <item url="#">
    <icon video play>
    Videos
  </item>
</menu>
<menu compact labeled icon>
  <item url="#">
    <icon gamepad>
    Games
  </item>
  <item url="#">
    <icon video camera>
    Channels
  </item>
  <item url="#">
    <icon video play>
    Videos
  </item>
</menu>
Notes
Compact menu only takes up the necessary space.
<menu vertical>
  <item url="#" active="%home%">Active on home page</item>
  <item url="/menu" active="*%url%">Active on destination page</item>
  <item url="https://chap.website/shop" active="*/shop">Active on shop page</item>
  <item active url="#">Always active</item>
</menu>

Leave a comment

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