Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
46 lines (34 sloc) 1.93 KB

Menus

Menus are used for navigation on the frontend. You can manage them (add, edit, and delete) from the backend using the :guilabel:`Content/Menus` section:

/images/fundamentals/content/menus/1.png

Each menu item has localized name, URL, and position. Position might be used to sort the menu items in the correct order:

/images/fundamentals/content/menus/2.png

After menu is created, you can display it on the frontend using the built-in MenuViewComponent class like this (the menu code is passed as the parameter to identify the menu we want to display):

As you can see, an additional CSS class might be applied using the corresponding optional parameter.

The menu will be displayed using the built-in views (_Menu and _MenuItem). The HTML elements have unique CSS classes (the BEM methodology is used), so it is easy to apply styles to them:

<div class="menu master-detail__menu">
  <div class="menu__items">
    <div class="menu__item menu__item--active">
      <a class="menu__item-name menu__item-name--active" href="/en/">Home</a>
    </div>
    <div class="menu__item">
      <a class="menu__item-name" href="/en/about-me">About me</a>
    </div>
    <div class="menu__item">
      <a class="menu__item-name" href="/en/contacts">Contacts</a>
    </div>
  </div>
</div>

If you want to change the HTML, just copy the views into your project and they will be used instead of the built-in ones, so you will be able to modify them as you want.