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 vertical menu with "|" as spacer and bonsai.css as button.

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?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.