Frontend - Menu - Overview

The menu package that comes with Parthenon is designed to help you quickly build a powerful and easy to use menu.

Components

• Menu
• MenuGroup
• MenuItem

Menu

Props

Name	Type	Default Value	Description
list-class	String or Object	menu-list	The class that is provided to the ul list

Example

<Menu>
  <!-- ... Contents of Menu --->
</Menu>

Output

<div>
  <ul class="menu-list">
    <!-- ... Contents of Menu -->
  </ul>
</div>    

MenuGroup

Props

Name	Type	Required	Default Value	Description
name	String	true	n/a
title-class	String or Object	false	menu-group-title	The class that is provided to the div containing the title for the group
list-class	String or Object	false	menu-group-list	The class that is provided to the ul list

Example

<MenuGroup name="Section">
  <!-- ... Contents of Menu --->
</MenuGroup>

Output

<li>
  <div class="menu-group-title">Section</div>
  <ul class="menu-group-list">
    <!-- ... Contents of Menu -->
  </ul>
</li>

MenuItem

Props

Name	Type	Required	Default Value	Description
route-name	String	true	n/a	The name of the vue route the link is for.
route-options	Object	false	{}	The route options.
link-class	String or Object	false	menu-link	The class that is provided to the link
item-class	String or Object	false	menu-item	The class that is provided to the link

Example

<MenuItem route-name="app.home">Home</MenuItem>

Output

<li class="menu-item">
  <a aria-current="page" href="/app/home" class="router-link-active router-link-exact-active menu-link">Home</a>
</li>