Creating Menus

Newsbeat supports 3 menus:

  • Secondary Menu – sometimes can be known as Top menu.
  • Primary Menu – usually can be seen as Main menu.
  • Hidden Menu – Off canvas menu.

When you create/edit a menu, you will see display location right under botton of menu items:

These are available menu locations on the site registed by the theme you can add your menu to. After adding menu items, set display location(s) for your menu, this also can be done in Manage Locations tab if you’ve already had menus.

Simple Menu

Simple menu is just a multi-levels dropdown list, it only support plain text and default features.

For detailed guide on using/creatin menu, refer this article on WordPress Codex WordPress Menu User Guide.

Mega Menu

Mega Menus are particularly helpful for websites those want to show more than just links on their menu. You can add whatever you want like shortcodes, custom html markup, columned content. Click here for some previews of mega menu.

To use Mega menu, make sure Mega menu in Theme Admin Menu -> Settings is enabled (it’s enabled by default). After enabled, you will see More Settings + button on menu item, now you are able to use Megamenu.

Avalable options in More Settings + might change and will depend on current menu item’s depth, depth 2 (or higher depth) menu items will be treated as simple menu item, the following figures demonstrate what options are available for current menu depth:

Depth 0
Depth 1 with different content types

What options we have?

Depth 0: superordinate menu item

  • Mega menu – Enable/Disable menu menu for menu item.
  • Mega menu size – Full width, x-small, small, medium.
  • Before Menu item – Prepend text or custom html markup like icon font or emoji to menu item.
  • After Menu item – Append text or custom html markup like icon font or emoji to menu item.

Depth 1: subordinate menu items will become columns when its superordinate menu item is megamenu, they can also have different content types from each others on same level.

  • Before Menu item – as above.
  • After Menu item – as above.
  • Column content type
    • Default: output sub menus as simple links.
    • Post block: Display posts with custom query.
    • Custom Content: Display custom content.
  • Column size: define column size, default is full-width column.
  • Request type: Ajax or regular request. On ajax mode, mega menu content will be only loaded when readers open megamenu. This option is not available for default Column content type.

Dependent fields for Column content type Post block:

  • Post block layout – 2 built-in layouts (Default & Alt), more layouts are available when plugin WP Post Blocks is activated.
  • Post categories
  • Posts Order
  • Posts Order by
  • Time Period – Only apply to layouts from WP Post Blocks.

Dependent fields for Column content type Custom Content:

  • Custom Content – custom textarea field for you to insert custom content.

Depth 2+: menu items at this level (or higher) will be treated as simple links.

Alright, let’s get to the point.

We create a new menu, let’s call Main Menu, and has items like these:

Back-end
Front-end

Content type: Default

Default content type allow you to show sub menus as columns, let add subordinate menu items like this:

and change options for menu items:

menu item A:

  • Mega menu: Enable.
  • Mega menu size: Fullwidth.

menu item A1, A2, A3:

  • Column content type: Default.
  • Column size: 4/12

and our result:

Deeper levels of menu items will look like this:

Content type: Post Block

Enable full width mega menu for menu item Sample Page (A ), and add a new subordinate menu item (A1):

options for menu items will be changed like following:

menu item A:

  • Mega menu: Enable.
  • Mega menu size: Fullwidth.

menu item A1:

  • Column content type: Post Block.
  • Column size: Default.
  • Post block layout: Default.
  • Post Categories: Specify your categories by typing category name, you will be suggested.

and our result:

As you can see in above figure, menu item A1 is used as (extra) active tab displaying latest articles from selected categories, you can also change its title or link to external url as you want, in case you want to link to internal page or category, use category/page menu item instead of custom links menu item.

another examples of mega menu using different post blocks:

if only one category is specified, categories nav won’t be showed (this only applies to built-in layouts like default & alt ). Note that posts from children categories of specified category won’t be show as mega menu post block used category__in for retrieving posts.

To have multiple columns using post blocks, we add 2 subordinate menu items like this:

we will change options for these menu items:

menu item A1:

  • Column content type: Post Block.
  • Column size: 6/12. the theme use 12 columns grid system so 6/12 will be a half of cake.
  • Post block layout: layout 6

menu item A1:

  • Column content type: Post Block.
  • Column size: 6/12.
  • Post block layout: layout 7

and our result:

Content type: Custom content

Display your Custom HTML markups or shortcodes with Custom Content content type. Let’s create subordinate menu items like this:

with options for these menu items:

menu item A:

  • Mega menu: Enable.
  • Mega menu size: Fullwidth.

menu item A1, A3:

  • Column content type: Custom content.
  • Column size: 3/12.
  • Custom Content: Your text content.

menu item A2:

  • Column content type: Custom content.
  • Column size: 6/12.
  • Custom Content: We use WP My Instagram shortcode [wp_my_instagram username="wpthms" limit="8" layout="4" size="medium" ].

and final result:

Mixed Content types

You can be creative and mix content types as you want like this example: