Menu Element

Guide your visitors through the website.

Overview

The Menu Element is used to navigate between multiple pages. It offers various styles, alignments and if enabled automatically generates a responsive mobile menu. A menu item can be displayed as link or button and you can link to internal or external pages.

Usage Examples

  • Vertical Top Menu.
  • Horizontal Footer Menus.
  • Multi-page Article Navigation.
  • ...

Menu Properties

  1. Menu Style: Choose between a Horizontal or vertical menu (see both in action below). Depending on the menu type the properties change slightly.
  2. Generate separate Mobile Menu: If checked Mame generates a separate menu for small devices. You should only enable it once per page.
Settings for Horizontal Menus
  1. Menu Caption: Optional Text displayed above the menu.
  2. Caption Size: Size of the optional caption
  3. List Style: Choose which style the menu items should use (or none).
  4. Space between: Set up the spacing between the menu items
  5. Spacer: Optional, choose an spacer (can be any letter or icon), mostly used in vertical menus.
  6. Menu Item Color: As menu items are links they usually use your site's link color, with this setting you can override this behavior.
Settings for Vertical Menus
  1. Space between: Set up the spacing between the menu items
  2. Spacer: Optional, choose an spacer (can be any letter or icon), mostly used in vertical menus.
  3. Menu Item Color: As menu items are links they usually use your site's link color, with this setting you can override this behavior.
Menu Items:

Menus in mame are not auto-populated. So you need to create your own menu structure. The menu item makes this easy.

  1. Title: Sets the title of the menu item
  2. Link Type: Choose between external (other websites) and internal (your mame site) links.
  3. Page (for internal links): Choose a page where the link points to
  4. Link (for external links): URL including protocol (for example: https://mame.app)
  5. Target: Should the link open in a new browser window or in the same one.
  6. Display As: How should the menu entry be displayed? As button or as link.


Everything else is configured with the common general properties. 
Menu Element Properties Description / Wireframe

See it in action

A horizontal menu with with circles as listing type and a vertical menu with "|" as spacer and bonsai.css as button link.

Interactions and Accessibility

Users navigate between Menu Items by pressing Tab and open them by pressing Enter

Generated HTML


<div class="mame-element mame-menu">
   <ul style="..">
     <li style="..">
       <a href=".." rel="noopener norefferer" target="..">...</a>
     </li>
   </ul>
</div>

Style / CSS Selectors


.mame-menu {
  /* All menus */
}

.mame-menu ul {
  /* Menu ul */
}

.mame-menu li {
  /* Menu items */
}

JavaScript

Menus are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?