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. 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.

  4. Frontpage Link

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

  5. 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.

  6. 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.

  7. 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 will may have completely different menu locations built-in. To assign a menu to a available menu location in your chosen theme, click on the Menus option in the left-sidebar, then click on the drop-down list underneath the Assigned Menu column on the right side of the screen. This list will display the available menu locations; simply select the required location and the menu will be assigned and will appear on your live site.

Assigning menu
Assigned menu

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:

Menu item list

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:

Reorder and menu items

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:

Drag and drop 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!

Creating sub sub menus

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.

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.