Navigation

The Navigation template part is used to render the specific menu defined in the WEM project.

Syntax

<% Navigation container-name %>

<% Navigation container = container-name %>

<% Navigation container = container-name, right = menu-right %>

<% Navigation container = container-name, renderer = renderer-type %>

The WEM runtime supports three fixed visible menu containers, along with one invisible container that cannot be rendered.

container-name

main

user

footer

Renderer

The renderer parameter accepts only one argument. Depending on whether the renderer parameter is set to legacy, the menu will be rendered in either a legacy format or a Bootstrap structure.

renderer

legacy

The menu-right parameter can be set to true or false, which determines whether the menu is rendered on the right side.

Note that this parameter is ignored when the renderer is set to legacy.

menu-right

true

false

Example

<body>
    <div class="top-menu">
        <% Navigation container = main %>
        <% Navigation container = user, right = true %>
    </div>
    <!-- Body content -->
    <% Navigation container = footer, renderer = legacy %>
</body>

Generated Output

<ul class="nav navbar-nav">
    <li class="active mode-cross-link">
        <a href="/">Home</a>
    </li>
    <li class="mode-cross-link">
        <a href="/forum">Forum</a>
    </li>
    <li class="dropdown">
        <a id="navitem8" href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<i class="wem-icon-postfix fa fa-caret-down"></i></a>
        <ul class="dropdown-menu" role="menu">
            <li class="mode-cross-link">
                <a href="/resources/documentation">Documentation</a>
            </li>
            <li class="mode-cross-link">
                <a href="/resources/training">Training</a>
            </li>
        </ul>
    </li>
    <li class="mode-cross-link">
        <a href="/status">Status</a>
    </li>
</ul>

PreviousLanguage Select NextNode ID

Last updated 19 days ago

Was this helpful?

<body> <div class="top-menu"> <% Navigation container = main %> <% Navigation container = user, right = true %> </div>  <% Navigation container = footer, renderer = legacy %> </body>

<ul class="nav navbar-nav"> <li class="active mode-cross-link"> <a href="/">Home</a> </li> <li class="mode-cross-link"> <a href="/forum">Forum</a> </li> <li class="dropdown"> <a id="navitem8" href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<i class="wem-icon-postfix fa fa-caret-down"></i></a> <ul class="dropdown-menu" role="menu"> <li class="mode-cross-link"> <a href="/resources/documentation">Documentation</a> </li> <li class="mode-cross-link"> <a href="/resources/training">Training</a> </li> </ul> </li> <li class="mode-cross-link"> <a href="/status">Status</a> </li> </ul>

Navigation

Syntax

Menu Containers

Renderer

Right-Handed Menu

Example

Generated Output

Navigation

Syntax

Menu Containers

Renderer

Right-Handed Menu

Example

Generated Output