Platformus CMS
latest
  • Getting Started
  • Fundamentals
  • Platformus.Core
  • Platformus.Website
    • Objects
    • Menus
    • Forms
    • File Manager
    • Classes
    • Tabs
    • Members
    • Endpoints
    • Data Sources
    • Advanced
  • Platformus.ECommerce
  • Platformus.Images
  • Custom Extensions
Platformus CMS
  • Docs »
  • Platformus.Website »
  • Menus
  • Edit on GitHub

Menus¶

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

../_images/126.png

Each menu item has localized name, URL, and position:

../_images/218.png

URL¶

URL is where user is redirected when clicks the menu item.

Position¶

Position might be used to sort the menu items in the correct order within the menu.

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

@await Component.InvokeAsync("Menu", new { code = "Main", additionalCssClass = "master-detail__menu" })

Or using the view component tag helper:

<vc:menu code="Main" additional-css-class="master-detail__menu" />

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

The result can look something like this (note that the current menu item is highlighted):

../_images/313.png

Menus are 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 these default 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.

Next Previous

© Copyright 2015, Dmitry Sikorsky Revision bcad30ea.

Built with Sphinx using a theme provided by Read the Docs.
Read the Docs v: latest
Versions
latest
Downloads
pdf
html
epub
On Read the Docs
Project Home
Builds

Free document hosting provided by Read the Docs.