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`

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.

alt Lists only: Alternative text for the image.

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>

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>

To divide menu items evenly, an item count needs to be specified

Vertical submenus

<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>

Inverted

<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>

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>

Text content

<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 marginless>Sign up</button></item>
  <item right><button marginless>Log in</button></item>
</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>

Compact menu only takes up the necessary space.

Active item pattern matching

<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>

Powered by Chap WordPress theme.

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.

Menu

Promotions

Coupons

Rebates

Demos

Documentation

Social media

Newsletter