WordPress menus

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

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

View custom content examples
Shortcodes in items
Icons

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.

Menu with icons
Menu with icons
Read more about the icon shortcode.
Labels

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
Labels in menu
Read more about the label shortcode.
Dividers

Dividers can be created by using the divider CSS class.

Dividers in menu
Dividers in menu

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
Normal menu with a search widget
Add the right class
Add the right class
Right floated menu item
Right floated menu item
Right floated menu item in a container menu
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.
Screen options
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.

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.

2 responses to “WordPress menus

Leave a comment

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