The Menu element shows one of your menus on the page, as a navigation bar in your header, a list of links in your footer or a side menu. You build the menu itself under Menus. The element decides how it looks and behaves: its layout, how submenus open and when it turns into a hamburger button on small screens.
Add a menu
- Create the menu first. See Menus and navigation.
- Open your header or the section where the menu should go.
- Click Elements in the left sidebar.
- Drag Menu into the section.
- Open the element settings and choose the menu under Menu.
Until you choose a menu, the element says No menu selected.
Layout and alignment
- Layout: Horizontal for a bar, Vertical for a list.
- Item alignment: Left, Center, Right or Justify.
- Gap between items: Small, Medium or Large.
- Highlight current page: marks the item of the page the visitor is on.
Submenus
- Open submenu: Default (hover for horizontal, click for vertical), On hover, On click or Always open (vertical only).
- Show submenu icon: shows an arrow next to items with a submenu.
- Separate link and submenu toggle: the title opens its page and the arrow opens the submenu. Use it with On click.
- Dropdown alignment, Dropdown max width, Hover close delay and Open animation (None, Fade or Slide).
- Max nesting depth: Unlimited or 1 to 5 levels.
Mobile menu
- Responsive breakpoint: the screen width at which the menu becomes a hamburger button: 768px (tablet and below), 1024px (laptop and below), 1280px (below large desktop), or Off to always show the full menu.
- Mobile submenu style: Accordion, Dropdown or Overlay.
Accessibility
Fill in Navigation label (accessibility), for example Main menu, so screen readers can tell your menus apart.
Tip: style single items, add icons or build a large dropdown in the menu itself. See Menu styling and mega menus.