WordPress menus

Dropdown items can be created simply by nesting menu items in the WordPress menu editor.

Nested menu itemsDropdown menu

Popup menus must contain 2 or 3 levels of items. The root item must have Display children as popup option checked.

Creating popups2 levels of items3 levels of itemsCustom popup content

View custom content examples

Shortcodes in items


Menu items can contain icon shortcodes, if they are enabled under Chap Theme -> Chap Shortcodes -> Allow shortcodes in menu item text.
icon CSS class should be used when the item title is an icon without any text.

Allow shortcodes in menu item textAdding a mail iconAdding an icon class

Menu with icons
Read more about the icon shortcode.


Menu items can also contain the label shortcode.

Messages[label tiny blue circular]3[/label]
Friends[label red floating]28[/label]
[label]18-22[/label] Home
[label teal]9-17[/label] Office
Labels in menu
Read more about the label shortcode.


Dividers can be created by using the divider CSS class.

Dividers in menu
Regular dividerMarginless divider

Right aligned items

The menu widget area allows to place widgets to the right side of the menu, such as search form or WooCommerce cart widget. If you would like to place a menu item on the right side, just add the right class to the item in the WordPress menu editor.

Normal menu with a search widget
Add the right class
Right floated menu item
Right floated menu item in a container menu
To add classes to menu items, make sure the “CSS Classes” option is selected in the “Screen Options” of WordPress administration panel.

Disable dropdowns

When using the Custom Menu widget in the Sidebar widget area, sometimes it is desirable to not show nested menu items in dropdowns. To achieve that the Display children as a vertical menu option can be enabled.

Sidebar menu items in dropdownDisabling dropdown modeItems are no longer in dropdown

The Custom Menu widget has an additional “Custom CSS classes” text field option, which allows the create many different looking sidebar menus and lists by using various Semantic UI classes.

Some of the possible class combinations

fluid vertical menu – default
secondary fluid vertical menu
inverted fluid vertical menu
pointing fluid vertical menu
secondary pointing fluid vertical menu
big fluid vertical menu
tiny secondary vertical menu
fluid bulleted list
large link list
divided selection list
relaxed animated list
big celled inverted list

What do the classes do?

vertical – sidebar menus should be vertical and not horizontal
fluid – makes the menu fill the entire width of the sidebar
inverted – inverts the colors, so the menu could be seen from a dark background
list – display a list instead of a menu
relaxed – add more space between list items
For more info and examples about which classes to use, see the menu shortcode and list shortcode documentation.
fluid vertical menuinverted fluid vertical menupointing fluid vertical menusecondary fluid vertical menubig fluid vertical menutiny secondary vertical menusecondary pointing fluid vertical menularge link listfluid bulleted listdivided selection listrelaxed animated listbig celled inverted list padded segment