TypoScript Menu with manual columns

Question

I have a typical grid-based dropdown menu with predefined columns, as you find them in foundation, bootstrap etc.

Now I'd like to manually let the editor control which items go in which column – without having to hardwire too many pids or creating additional pagetree nodes (Pages like "Group for column 1") in the BE.

How do I do that with TypoScript?

Urs Urs · Accepted Answer · 2016-11-19T10:23:06

The page type "Spacer" or "Separator" (doktype 199) is perfect for this:

It can be rendered as html content, using the SPC state. Editors can place it in their pagetree where they want to split up columns.

lib.main_nav_1 = HMENU
lib.main_nav_1 {
  special = directory
  special.value = {$pidEntryPoint}
  wrap = <div class="columns small-12 medium-3"><ul>|</ul></div>
  1 = TMENU
  1 {
    expAll = 1
    NO {
      text = nav_title // title
      wrapItemAndSub=<li>|</li>
    }
    ACT < .NO
    ACT {
      wrapItemAndSub = <li class="active">|</li>
    }
    ACT = 1
    CUR < .NO
    CUR {
      wrapItemAndSub = <li class="current">|</li>
    }
    CUR = 1
    SPC = 1
    SPC {
      doNotLinkIt = 1
      doNotShowLink = 1
      allWrap = </ul></div><div class="columns small-12 medium-3">|<ul>
    }
  }
  2 < .1
  2 {
    wrap = <ul>|</ul>
    SPC = 0
  }
}
}

TypoScript Menu with manual columns

1 Answers