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! The new menu will expand automatically, showing an Add menu item button. You can collapse or expand it later by clicking its name. To rename it, open the actions menu at the right of its row and choose Rename.
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 - Adds supplementary information about the link. Browsers commonly display this text as a tooltip when a visitor hovers over the link.
- CSS Class - Add a CSS class to the menu item 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, nofollow indicates that you do not want search engines to associate your site with, or follow, the linked page. It does not guarantee that the destination page will not be crawled through other links.
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:
- 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 useful if you want to provide direct access to a particular article from your menu. When the Post Link type is selected, an additional option will appear:
Post page - Here you can select the specific published post you want the menu item to link to. Clicking on the field will open a searchable drop-down list of your articles, which 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.
- Page Link
The Page Link menu item links to one of the pages on your Publii site. This can be useful for an About Us, Contact or other informational page separate from your posts. When this type is selected, a Page field will appear where you can select a published page. You can type in the field to find a particular page.
- Tag Link
The Tag Link menu item works similarly to the Post Link type, except that it links to a specific tag page rather than a post. A tag page displays the posts assigned to that particular tag, making this option useful for providing quick access to specific topics or content categories. When this item type is selected from the Type field, a new option will appear:
Tag page - Here you can select the specific tag page that you want the menu item to link to. Clicking the option will open a list of your available tags. Hidden tags are not included. You can also use the dynamic search to quickly find a particular tag.
- Tags List Link
The Tags List Link menu item links to the site's main Tags page, which displays a list of the tags available on your website.
- 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.
- 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.
- Post Index Link
The Post Index Link menu item links to your site's post listing. This is useful when your homepage displays a separate page and you want to add a Blog link to your menu. The destination depends on your site's post index configuration.
- 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.
- External Link
The External Link menu item allows you to manually enter an 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 URL field will appear where you can enter the URL you wish the menu item to link to.
- Text Separator
The Text Separator menu item provides a label without linking to another page and is primarily used when you have many submenu items. For example, you may have a Text Separator item called Categories with a submenu containing Tag Link items. How visitors open that submenu depends on your theme.
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 the assignment button in the Position column. For a menu without an assigned position, this displays Unassigned. This will open the Configure menu position popup with the available locations and depth settings.
The menu position 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.
Enable the locations where you want the menu to appear, then click Save changes. A location already used by another menu is unavailable until you remove that menu's assignment. A menu without an assigned position will not appear on your website.
Usually, the main menu, located at the top of a website, displays submenus, but the footer menu is often more concise. With the Maximum depth option, you can determine the number of menu levels displayed in a particular position.
Remember that the maximum number of menu levels cannot exceed the value defined in the theme. If your theme allows unlimited levels for a position, you can enable No depth limit. Otherwise, enter a whole number from 1 up to the theme's limit.
Creating Sub-Menu Items
For larger sites, you may want to add submenus to your menus; for example, an About Us menu item with a submenu containing 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 the handle on the left side of its row to its new position in the list; you'll see a dashed outline to show where it will appear once dropped:
You can also create submenus by dragging the item to the right beneath another item; the 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 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 dashed border added to it, and a new set of options will appear beside eligible destination 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:
- 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.
- By clicking on the Move command for Menu Item 2, it will be selected (indicated by the dashed border).
- Then, beside Menu Item 1, a new set of options appears under Insert selected item:. Here, I can tell Publii exactly where to put the menu item by clicking on the relevant option: Before, After, or As submenu.
- 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.
- If I decide not to move the item after all, I can click the red Unselect button next to Menu Item 2 to cancel the move.
Hiding a Menu Item
To hide a menu item on your website, open the actions menu at the right of its row and choose Hide. To make it visible again, choose Show from the same menu. Note that hiding a menu item also hides all its child menu items on the website.
Menu items may display status labels beside their names: Hidden indicates an item you have hidden, Draft indicates that the linked post or page is a draft, and Unavailable indicates that the linked content is no longer available.
Duplicating a Menu Item
Each menu item can be duplicated by opening the actions menu at the right of its row and choosing Duplicate. It will duplicate instantly with one click, so don't click too 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, open the actions menu at the right of its row and choose Delete, then confirm the deletion. Deleting an item also deletes its submenu items, but does not delete the posts, pages or other content they link to.
To delete an entire menu, add a check to the checkbox to the left of the menu you wish to delete; a Delete button will appear at the top of the section. Click it and confirm the deletion. You can also delete a single menu using the Delete menu action in its row menu.
