导航标签用于生成前台导航,相关的有三个标签navigation,navigationMenu,navigationFolder,三个必须联合使用

navigation标签

标签名 作用 包含属性
navigation 导航标签 nav-id,root,id,class

标签属性:| 标签属性名 | 含义 || —- | —- || nav-id |后台导航 id,非必须 || root |生成导航根节点的标签名,默认为 ul,如果为空字符串表示根节点自己创建 || id |生成导航根节点的 dom 属性 id ,root 不为空时有效 || class |生成导航根节点的 dom 属性 class,root 不为空时有效 |

navigationMenu标签

标签名 作用 包含属性
navigationMenu 导航菜单标签 root,class

标签属性:| 标签属性名 | 含义 || —- | —- || root |生成导航菜单根节点的标签名,默认为 li || class |生成导航菜单根节点的 dom 属性 class |

navigationFolder标签

标签名 作用 包含属性
navigationFolder 导航菜单标签(包含子菜单) root,class,dropdown,dropdown-class

标签属性:| 标签属性名 | 含义 || —- | —- || root |生成导航菜单根节点的标签名,默认为 li || class |生成导航菜单根节点的 dom 属性 class ,默认为dropdown || dropdown |生成导航菜单下拉菜单根节点的标签名 ,默认为 ul || dropdown-class |生成导航菜单下拉菜单根节点的 dom 属性 class,默认为 dropdown-menu|

几个常见的官方demo

创建一个bootstrap 风格的导航
  1. <!—后台导航 id 为1—><navigation nav-id="1" root="ul" id="main-navigation" class="nav navbar-nav navbar-nav-custom">    <navigationMenu root="li" class="menu-item menu-item-level-{$level}">        <a href="{$menu.href|default=''}" target="{$menu.target|default=''}">{$menu.name|default=''}</a>    </navigationMenu>    <navigationFolder root="li" class="dropdown dropdown-custom dropdown-custom-level-{$level}" dropdown="ul"                      dropdown-class="dropdown-menu dropdown-menu-level-{$level}">        <a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">            {$menu.name|default=''}<span class="caret"></span>        </a>    </navigationFolder></navigation>
完全自己定义导航根节点
  1. <ul id="main-navigation" class="nav navbar-nav navbar-nav-custom">    <navigation nav-id="1" root="">        <navigationMenu root="li" class="menu-item menu-item-level-{$level}">            <a href="{$menu.href|default=''}" target="{$menu.target|default=''}">{$menu.name|default=''}</a>        </navigationMenu>        <navigationFolder root="li" class="dropdown dropdown-custom dropdown-custom-level-{$level}" dropdown="ul"                          dropdown-class="dropdown-menu dropdown-menu-level-{$level}">            <a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">                {$menu.name|default=''}<span class="caret"></span>            </a>        </navigationFolder>    </navigation></ul>

自定义还是默认主要是看navigation标签的 root 属性是是否为空的

原文: https://www.thinkcmf.com/docs/cmf/导航标签.html