If you want to add a simple, text-based navigation element, you can take advantage of the Menu block available in the content tab.
After dragging a Menu block to the stage, you can start adding menu items by clicking on Add new item in the Content properties area.
After you're done adding the items needed for your menus, you can set properties for each.
- Link type (web page, email, phone, sms)
- Target, i.e. if clicking the link should open a new browser tab or stay in the same tab
- Title (optional), i.e. a secondary text that appears when hovering on the menu item
You can reorder menu items by dragging the icon found to the left of the menu item title.
Scrolling down to the properties in the editor sidebar, you will see a few properties that are specific for your Menu.
- Items can be displayed horizontally or vertically by changing the layout
- A custom text separator for items can be added.
Here is an example of a menu created with BEE:
Add a mobile menu
To improve the usability of a menu on mobile devices, there is also a widget found in the Content properties to configure it as a mobile menu.
When turned on, a “hamburger” menu will be applied on mobile. It can be expanded with a tap to reveal menu items in a vertical layout. The size, shape, and colors of the menu icon are customizable.
Setting up internal navigation
Please note that this feature is only available for the BEE Page Builder product inside our BEE Plugin product offering.
In Page Builder, a menu item, or any regular link as well, can link to a section of the same page, by selecting internal link as link type.
To set a content block as an “anchor” for an internal link, block options now have a new widget called Block identifier. When turned on, an ID will be automatically generated, but it can be customized. This identifier must be unique across the page being edited.
These identifiers will be available in the “scroll to” dropdown when creating an internal link for a menu item or for a regular link.
NOTE: If you are a BEE Plugin user and are looking for technical documentation on this feature, and on how to enable it for your users, please see the BEE Plugin docs.