Skip to content

Dynamic Site Menus

You can have Phosis generate a dynamic site menu for you anywhere on your site by tagging elements of your site’s page template.

Pages in the menu will be sorted by their order in your Site Contents tree, which you can drag and drop to reorder.

Within your menu’s HTML you can have one or more placeholder items already defined in the template for clarity and previewing/testing during your HTML/CSS design phase. However, just like Phosis containers, your menu’s existing items will be cleared and the dynamic menu items added in their place.

Sample HTML

Let’s reference the following Bootstrap 4 menu structure from our tutorial earlier in this document. We’ve added in the necessary data attributes:

<ul class="navbar-nav ml-auto" data-phosis-menu>
  <li class="nav-item" data-phosis-menu-item data-phosis-menu-item-active-class>
    <a class="nav-link" href="#" data-phosis-menu-text data-phosis-menu-link>Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Articles</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

data-phosis-menu

This top-level attribute should be applied to the container that has elements which will be repeated to make your menu. For example, in our tutorial HTML above, the <ul> element has this attribute applied.

data-phosis-menu-item

This attribute tells Phosis which descendant of your menu to use as the overall item template. This will be duplicated and used for every page you have marked as “Show In Menu”.

Item Attributes

There are then three attributes that flag elements for replacing:

data-phosis-menu-item-text

This can be applied on children of data-phosis-menu-item or on the data-phosis-menu-item itself. The element(s) flagged with this attribute will have their text set to be the title of a page that is shown in the menu.

Any elements within data-phosis-menu-item flagged with this attribute (or data-phosis-menu-item itself, if it is also flagged) will have their href attribute set to the slug of any pages shown in the menu.

data-phosis-menu-item-active-class

Any elements within data-phosis-menu-item flagged with this attribute (or data-phosis-menu-item itself, if it is also flagged) will have a CSS class added to them if they are menu item for the active page, i.e. if the URL ends with their slug.

The default CSS class added is “active,” but you can override it by adding a value to this attribute like so:

data-phosis-menu-item-active-class="your-active-class or-classes"

As noted here, you can also specify multiple classes to add in your HTML.