Vertical And Horizontal Menu Widgets

Tirenoa has two menu widgets. Tirenoa: Vertical Menu shows a menu as a list, one item below the other, for a sidebar. It replaces the old Side Navigation page template. Tirenoa: Horizontal Menu shows the items of a menu in one row with a separator between them, as often seen in a footer.

Both are classic WordPress widgets. They are part of the legacy widget areas, which are switched off by default. If you build with the Builder, the Menu Element does the same job without widgets; see the last section.

In this article: Before You Start: Switch on Widgets · The Vertical Menu Widget · The Horizontal Menu Widget · Replacing the Side Navigation Template · Without Widgets: the Menu Element · Related

Before You Start: Switch on Widgets

  1. Go to Tirenoa › Options and open Advanced › Features.
  2. Turn on Legacy Widget Areas and save.
  3. Reload the admin. Appearance › Widgets is now available, and the Widget and Widget Area elements appear in the Builder.

Note: While Legacy Widget Areas is off, the widgets screen, all Tirenoa widgets, the sidebar options of pages and the Side Navigation page template are not available.

The Vertical Menu Widget

Add Tirenoa: Vertical Menu to a widget area under Appearance › Widgets, or place it on a page with the Widget Element.

Option What it does
Title Optional heading above the menu.
Menu Type Custom Menu shows a menu from Appearance › Menus. Vertical Menu shows the classic side navigation: a parent page and its child pages.
Select Menu For Custom Menu: the menu to show. Icons set on the menu items are shown too.
Parent Page For Vertical Menu: the parent page. Only pages that have child pages are listed.
Behavior Hover or Click: how submenus open.
Layout Left or Right. Choose the side of the content the menu sits on; the arrow of each item moves to the matching side.
Font Size Size of the menu text, for example 14px.

For the Vertical Menu type, your pages must use the WordPress page hierarchy: open a page, and set its Parent in the page attributes. The widget then lists the parent first, with the title “Back to Parent Page” on its link, followed by all child pages.

Note: If no menu or no parent page is selected, the widget shows nothing.

The Horizontal Menu Widget

Tirenoa: Horizontal Menu prints all items of one menu in a single row. It is flat: submenu items are shown in the same row as their parents, and there are no dropdowns.

Option What it does
Select Menu The menu to show.
Alignment Left, Center or Right.
Menu Padding Space on each side of the separator, for example 25px.
Menu Link Color Color of the links and the separator.
Menu Link Hover Color Color of a link under the pointer and of the current page.
Separator Text The character between two items, for example |. It is not printed after the last item.
Font Size Size of the menu text, for example 14px.

Enter colors as color codes such as #333333. The default colors are light gray and white, which suits a dark background; change them when the widget sits on a light one.

Replacing the Side Navigation Template

When you select the page template Side Navigation, the editor shows a notice that the template will be removed in a later version and that the Vertical Menu widget replaces it. To switch over:

  1. Add Tirenoa: Vertical Menu to a widget area, set Menu Type to Vertical Menu and choose the Parent Page.
  2. On the parent page and each child page, choose a normal page template and assign that widget area as the sidebar in the page options.
  3. Check the pages on the front end, then stop using the Side Navigation template.

Without Widgets: the Menu Element

On a site that keeps Legacy Widget Areas off, use the Menu Element in the Builder. Its Direction option switches between Horizontal and Vertical, and it can be placed in any column, including the columns of a footer or sidebar built as a layout section.