Documentation Level: 
Introduction
Documentation Status: 
No known problems

Menus

Menus are a collection of links (menu items) used to navigate a website. Menus are primarily displayed as a hierarchical list of links using Backdrop blocks. Each menu automatically creates a block of the same name.

Menu hierarchy

Menus can be "flat" or may be hierarchical (multilevel) A multilevel menu has one or more “leaf” menu items. For example, this is a multilevel menu structure:

Homepage

About Staff

  • Senior staff
  • Executive staff

Contact us

  • Directions to our office
    • Maps

Login

 

In this menu, the Senior staff, Executive staff, Directions to our office, and Maps links are all leaf menu links, nested below a parent menu link. Maps would be a third level link item.

Hierarchical menus would act as dropdown menus if used by a dropdown menu module; the flyout links would be the leaf items.

 

Default menus

In a default installation of Backdrop, there are three menus, the Primary navigation, Administration menu and the Account menu.

The Primary navigation's links are usually the main navigation structure for your site, and are often displayed prominently across the top or side of the site.

The Account menu contains the account and login/logout links and is usually displayed in the upper right corner of the site.

The Administration menu contains the links found in the Admin bar.

 

The menu list

All site menus can be found on the menu list page at Structure > Menus. Each menu is listed along with a description and a dropbutton with links to manage this menu. The available link options are:

  • Edit links - manage existing menu links
  • Add link - add a new menu link
  • Configure - change the menu name or its description

 

The Add Link page

The "Add link" page provides a form to add a new menu link to a menu. The following form fields are available on this page:

  • Menu link title - The text to be used for this link in the menu.
  • Path - The path for this menu link. This can be an internal Backdrop path such as node/add or an external URL such as https://backdropcms.org. Enter <front> to link to the front page.
  • Description - Shown when hovering over the menu link.
  • Enabled checkbox - Menu links that are not enabled will not be listed in any menu.
  • Show as expanded checkbox - If selected and this menu link has children, the first level children of the menu link will always be expanded. (NOTE: This rule doesn't cascade down for subsequent levels of children links. You must enable this option at each level where you want the next level to be expanded.)
  • Parent link - Which existing menu link item this menu item will be listed under. The maximum depth for a link and all its children is fixed at 9. Some menu links may not be available as parents if selecting them would exceed this limit.
  • Weight - In the menu, the heavier links will sink, and the lighter links will be positioned nearer the top.

 

The Edit Links page

The "Edit Links" page provides a table with a "draggable" list of existing menu links in a menu. For example, the default Account menu links page would list the My account and Log out links. The links are draggable, in that each row in the table can be manually dragged to change its position in the table. Once saved, the menu links would reflect the new positions in the draggable table. "Heavier" link items in the menu (those which are lower in the table) will appear lower in vertical menus or more to the right in horizontal menus.

In the Account menu for example, on a new Backdrop website, the "My account" link is top in the menu list and to the left of the home page. Dragging it below the Logout link and clicking save would cause "My account" to appear to the right of the "Log out" link on the web page.

If all menu links in the menu are at the same level, this will be a flat menu; if one or more menu links are "leaf" items (have another menu link as their parent), this would be a hierarchical or multilevel menu.

Every menu link has an associated "Edit" link which launches the form to edit the menu. The edit page is identical to the "Add link" page described above.

 

Menu blocks

Every menu has an associated block which can be added to a page. Menu blocks have configuration forms which allow you to select the depth and starting level of menu blocks. See more information about these blocks on the Blocks page.

 

Adding a content item to a menu as a new link

Say you are creating a new "The Fantastic All About Me Repository" page and wish to have a menu item in your main menu so that your fans can click this link to find out all about you. You could create a link in the Primary navigation menu which reads perhaps "About me" which when clicked goes to the "The Fantastic All About Me Repository" page. Note the components you need here to build this menu link:

  • A link title - "About me," which may be different from
  • The page title - "The Fantastic All About Me Repository," and
  • The page path - "content/about-me", for example.

 

This menu link can now be built in one of two ways: Directly while creating or editing Page content; or through the Menu UI.

 

Adding a menu link using the Add or Edit content page

  1. Navigate to the editing screen for the page you want to add to the menu by typing the edit path if you know the Node ID ("/node/NID/edit") or visiting the page and clicking the "Edit" tab. This can also be done when you first create the node (Content > Add content > Page).
  2. Scroll to the vertical tabs at the bottom of the page and click the Menu settings tab
  3. Click the checkbox marked Provide a menu link. The menu options will appear.
  4. In the Menu link title field, enter the title as it will be displayed in the menu - for the above example this would be "About me."
  5. In the Description field, enter the text that will be displayed when a user hovers over the link. For example, "Click this to go to The Fantastic All About Me Repository."
  6. In the Parent Item list, choose the menu that should display this item. Note: the menu you want will only appear in this list if you have assigned it to the content type of the node you are editing. See "Enabling menus for content types" below.
  7. (Optional) In the Weight list, select the relative weight of the link.
  8. Click Save.

 

Adding a menu link using the Menus section

Note that whereas you could generate a menu for a completely new page when using the Content add/edit page as described above, to use the Menus UI, you need to have already created the page and, more importantly, you need to know the page’s URL.

So continuing our example, suppose you had already created the "The Fantastic All About Me Repository" page and decided that the world needed to see this and that a menu link was needed, you would need to know the URL path for this page to use the Menu UI.

To find this, you could navigate to the "The Fantastic All About Me Repository" page and copy the address from the browser address bar. The path we need is the last part after the website address. If the address was http://example.com/content/about-me, the path would be "content/about-me", without the leading slash (or the quotes).

Once you know the path:

  • Navigate to the Menus page (Structure > Menus or http://example.com/admin/structure/menu).
  • Locate the Primary navigation and click Add link.
  • In the Menu link title field, enter the title as it will be displayed in the menu - for the above example this would be "About me."
  • In the Path field, enter the path for the link - "content/about-me."
  • In the Description field, enter the text that will be displayed when a user hovers over the link. For example, "Click this to go to The Fantastic All About Me Repository."
  • Check the Enabled checkbox: If the link is not enabled, it will not be displayed in the menu.
  • (Optional) In the Weight list, select the relative weight of the link.
  • Click Save.

 

Enabling menus on content types

Read about content types here

You can specify a default menu for a content authoring form. You may notice that the "Adding a menu link using the Add or Edit content page" example above we specified the "Page" content type. This is mainly because by default Post content types do not have a menu settings vertical tab! This is in turn because menus are not enabled for Post content types, though this can be changed. (Backdrop sites tend to use Posts for temporary content like articles which do not usually need a menu item; Pages tend to be designed for more permanent content.)

If however, you wished to be able to add your Posts to a menu or you had a new content type for which you needed menu items, this can be easily changed. Menus can be enabled on multiple content types.

 

Enable the menu for the Post content type

  • Navigate to the content type configuration page (Structure > Content types > Post).
  • Choose Menu settings vertical tab.
  • Click the checkbox of the menu(s) you want to enable.
  • (Optional) Set the Default parent item to choose a default menu for the content type.
  • Click "Save content type."

 

Creating a new menu

If the Primary navigation menu is not enough, you can create more menus. These can even be used to replace Primary navigation by swapping out the Primary navigation block in Layouts UI for your new memory block. Remember every new menu created automatically gets a new block.

  1. Navigate to the Menus page (Structure > Menus or http://example.com/admin/structure/menu).
  2. Click Add menu.
  3. In the Title field, enter a title.
  4. In the Description field, enter an optional description.
  5. Click Save.

To learn how to add new menu items to the menu, read further on Adding a link to a menu.

 

Editing menus

  • Navigate to the Menus page (/admin/structure/menu).
  • Click Edit Menu.
  • In the Title field, enter a new title.
  • Click Save.

Note: The default menus cannot be renamed.

 

Deleting a menu

  • Navigate to the Menus page (/admin/structure/menu).
  • Click Edit Menu.
  • Click Delete.
  • Click Delete again to confirm.
  • Note: The default menus cannot be deleted.