The Menus Screen

Menus are a must on any good website; you'll want users to be able to easily find their way around. Publii aims to make getting your menus up and running a cinch. To reach the Menus screen, click on the Menus option in the left-sidebar.

Creating a Menu

To create a new menu, click on the Add New Menu button, which will be in the center of the screen or on the top-right depending on whether you have any menus already or not. A popup box will open; here you can name your menu. Once done, click on the Create new menu button.

Your menu is now created, but there's a problem; there aren't any menu items for people to click on! On the Menus screen, click on your fresh new menu to expand its options. Since no items have been added yet, you'll see just two buttons; Add Menu Item and Edit Menu Name.

Click on the Add Menu Item button; this will open a sidebar on the right-hand side of the screen where you can provide details for your menu item. Initially, there are six options available:

• Label - This is the name that will be used for the menu item.
• Type - Defines what kind of link the menu item will be e.g. a link to a post or tag page, external link etc...More information on the link types available is in the next section.
• Link Title Attribute - Sets an attribute for the menu item's title; this is useful if you want the menu item to use a particular set of CSS rules or separate it from the other menu items.
• CSS Class - Add a CSS class to the menu for easier styling; only needed for advanced users who want to add their own CSS code to a theme.
• Link Target - Sets whether the link will redirect the user's current window to the link target, or opens a new browser tab or window to load it; this is particularly useful when linking to external URLs.
• Link "rel" Attribute - Sets the relationship attribute for the menu item; for example, setting this to nofollow will prevent search engine robots from following the link, which is useful for SEO purposes.

When you've got all your options the way you want them, click on the Add menu item button at the bottom of the sidebar. The menu item will be added underneath the selected menu. Repeat as necessary until you've added all the links you need.

Menu Item Types

The Type option that you can see when creating a new menu item is the most important setting, since it defines the behavior of the item; that is, what happens when a site visitor clicks on it in the menu. The various types allow you to point to specific articles or tag pages, or link to external resources, as well as provide some other useful actions for larger or more complex sites. The available menu item types are as follows:

1. Post Link

   The Post Link menu item type does what you would expect; it links to one of the posts on your Publii site. This can be very useful if you want to create an About Us or other informational page separate from your other content; simply create the post you want to use then link it from the main menu. When the Post Link type is selected, a new option will appear to the right of the Type field:

   Post page - Here you can select the specific post you want the menu item to link to. Clicking on the field will open a drop-down list of your articles, with a small search bar at the top of the list that will be very useful if you have a lot of posts! The search is dynamic, so entering the first few letters of the post name will filter the items instantly.

2. Tag Link

   The Tag Link menu item is the same function as the Post Link type, except it links to a specific tag page rather than a post. This can be very useful if you're creating a news-style site and want readers to have instant access to your different news categories, for example. When this item type is selected from the Type field, a new option will appear:

   Tag page - Here you can set the specific tag page that you want the menu item to link to. Clicking on the option will open a list of your available tag pages, or you can use the dynamic search bar at the top of the list to filter the results; very helpful if you have a lot of posts!

3. Tags List Link

   The Tags List Link menu item allows you to link to a Tags page which display all of the articles from a particular tag.

4. Author Link

   The Author Link menu item allows you to link to a specified author page; as your site becomes more established some users may appreciate being able to track their favorite author's work! When this item type is selected from the available types, a new option will appear:

   Author page - As with the post and tag pages, you can select which author page to link to from this drop-down list. If you have a lot of authors, you can start typing the author name to dynamically filter the list.

5. Homepage Link

   As simple a link as can be; Homepage Link menu items link back to your homepage, so they can be used as a Home button.

6. Internal Link

   The Internal Link menu item allows you to manually enter an internal link address for your site; this can be useful if you have plugin-created pages that are not part of the core Publii package or other non-post/tag/author pages. when this item type is selected an empty Internal link field will appear where you can enter your internal link URL.

7. External Link

   The External Link menu item allows you to manually enter a external URL for the menu item to link to. This can be used to, for example, link to Paypal for donations, or point to partner sites. When this item type is selected a new External link field will appear where you can enter the URL you wish the menu item to link to.

8. Text Separator

   The Text Separator menu item is a non-functional item that is primarily used when you have many submenu items. For example, you may have a Text Separator item called Categories, which isn't clickable, but if users hover over it then a submenu containing Tag Link items will open.

Assigning Menus

Menus in Publii are placed according to predefined sections in the theme; each theme that you download and use may have completely different menu locations built-in. To assign a menu to an available menu location in your chosen theme, click on the Menus option in the left-sidebar, then click on the drop-down button underneath the Assigned Menu column on the right side of the screen. This will trigger a popup with  the available menu locations and max-level option.

The Assigned Menu options allow you to display a single menu instance in multiple locations throughout your site, eliminating the need to create duplicate menus. For example, you can display your primary menu in both the header and footer sections of your website. However, this functionality relies on your theme's built-in support for multiple menu positions. You can also define the number of menu levels for each specific menu location.

Usually, the main menu, located at the top of a website displays submenus, but the footer menu is often more concise. With the Max-level option, you can determine the number of menu levels assigned for a particular position.

Remember that the maximum number of menu levels cannot exceed the value defined in the theme. To allow an unlimited number of menu levels for a position, simply set the value to "-1"."

Creating Sub-Menu Items

For larger sites, you may want to add submenus to your menus; for example, if you wanted to have an About Us menu item that, when clicked, would open a submenu with links to your informational pages. 

There are two ways to add submenus to a menu item; dragging and dropping (more information on this method can be found in the Restructuring Menus section below), or you can use the Add Submenu button that will appear next to each menu item in the list.

To add a submenu using this method, click on the menu you want to modify, then on the Add Submenu button next to the item you want to add the submenu to. This will open the Add New Menu Item sidebar; fill out the fields for the menu item as normal, then click the Add Menu Item button at the bottom of the sidebar. The new item will be added to the list, but will be slightly indented to indicate that it is a submenu of the menu item above it.  

Restructuring Menus

From time-to-time you may wish to modify the hierarchy of one of your menus. The Menus screen in Publii allows for simple drag and drop functionality to do this. On the Menus screen, click on the menu you wish to modify to see a list of its menu items, like in the below image:

To reorder an item, click and drag it to its new position in the list; you'll see a dotted outline to show where it will appear once dropped:

You can also create submenus by dragging the item slightly to the right; the dotted outline will indent, showing that it will be added to the menu item above it as a submenu:

If you like, you can create sub-submenus! Just drag and drop your sub-submenu item below and slightly to the right of a submenu item, and it will indent again to show that it will be placed as a submenu of a submenu!

Restructuring Menus via the Move Option

An alternative option is available for restructuring your menus; the Move button. This option is particularly useful when you need to be precise when shifting the layout of your menu. 

To use the Move option, in the list of menus, click the menu that you wish to modify to expand its options, then click on the Move command next to the menu item that you want to move. The menu item you are moving will have a dash-line border added to it, and a new set of options will appear in the other menu items; Before, After, and As Submenu.

By clicking on the relevant option, you can move the selected item to before or after a menu item, or add it as a submenu. In practice, this may look like this:

1. I have two menu items; Menu Item 1 and Menu Item 2, and I wish to make Menu Item 2 a submenu item for Menu Item 1.
2. By clicking on the Move command for Menu Item 2, it will be selected (indicated by the dash-line border).
3. Then, in the options for Menu Item 1, a new option appears; Insert Selected Item. Here, I can tell Publii exactly where to put the menu item by clicking on the relevant text; Before, After, or As Submenu.
4. Since I want to add Menu Item 2 as a Submenu of Menu Item 1, I can click the As Submenu option next to Menu Item 1; the menu item will be moved to this new location.
5. If I decide not to move the item after all, I can click the red Unselect text next to Menu Item 2 to cancel the move. 

Hiding a Menu Item

To enable or disable menu items on the front-end use the Hide button. Note that hiding a menu item hides all child menu items.

Duplicating a Menu Item

Each menu item, including any submenu items, can be duplicated by clicking the Duplicate icon to the right of the menu item, next to the Garbage icon; it looks like two overlapping squares. It will duplicate instantly with one click, so don't click to enthusiastically or you may end up with a lot more duplicated items than you need!

Deleting a Menu or Menu Item

To delete a menu item, click on the Garbage icon at the right side of the menu item. To delete an entire menu, add a check to the checkbox to the left of the menu you wish to delete; a new Delete Menu option will appear at the top of the section, so click the button to confirm deletion.