This snippet method renders a menu representing your SiteMap contents.
This snippet method renders a menu representing your SiteMap contents. The menu is rendered as a set of nested unordered lists (<ul />). By default, it only renders nested child menus for menus that match the current request path. You can add the "expandAll" attribute to the snippet tag to force full expansion of all child menus. Additionally, you can use the following attribute prefixes to further customize the generated list and list item elements:
false.
true.
If you are using designer friendly invocation, you can access the namespaced attributes:
<div class="lift:Menu?li_item:class=foo+bar">menu</div>
For a simple, default menu, simply add
<lift:Menu.builder />
To your template. You can render the entire sitemap with
<lift:Menu.builder expandAll="true" />
Customizing the elements is handled through the prefixed attributes described above. For instance, you could make the current page menu item red:
<lift:Menu.builder li_item:style="color: red;" />
true
If you are using designer friendly invocation, you can access the namespaced attributes:
<div class="lift:Menu?li_item:class=foo+bar">menu</div>
For a simple, default menu, simply add
<lift:Menu.builder />To your template. You can render the entire sitemap with
<lift:Menu.builder expandAll="true" />Customizing the elements is handled through the prefixed attributes described above. For instance, you could make the current page menu item red:
<lift:Menu.builder li_item:style="color: red;" />false
true.
If you are using designer friendly invocation, you can access the namespaced attributes:
<div class="lift:Menu?li_item:class=foo+bar">menu</div>
For a simple, default menu, simply add
<lift:Menu.builder />
To your template. You can render the entire sitemap with
<lift:Menu.builder expandAll="true" />
Customizing the elements is handled through the prefixed attributes described above. For instance, you could make the current page menu item red:
<lift:Menu.builder li_item:style="color: red;" />
true
If you are using designer friendly invocation, you can access the namespaced attributes:
<div class="lift:Menu?li_item:class=foo+bar">menu</div>
For a simple, default menu, simply add
<lift:Menu.builder />To your template. You can render the entire sitemap with
<lift:Menu.builder expandAll="true" />Customizing the elements is handled through the prefixed attributes described above. For instance, you could make the current page menu item red:
<lift:Menu.builder li_item:style="color: red;" />
Renders a group of menu items.
Renders a group of menu items. You specify a group using the LocGroup LocItem case class on your Menu Loc:
val menus = Menu(Loc("a",...,...,LocGroup("test"))) :: Menu(Loc("b",...,...,LocGroup("test"))) :: Menu(Loc("c",...,...,LocGroup("test"))) :: Nil
You can then render with the group snippet:
<nav data-lift="Menu.group?group=test"> - <a href="/sample/link">Bound menu item</a> </nav>
By default, menu items bind the href and text of an a
element in
the template, and iterates over li
elements. You can customize
these settings using the repeatedSelector
, linkSelector
, and
hrefSelector
parameters; for example:
.
Bound menu item
These selectors are CSS selector transform selectors. repeatedSelector
and linkSelector
are the left-hand-side, while hrefSelector
is the
second part, which indicates what will be replaced by the href text.
For example, the above would roughly yield a transform that looks like:
"p" #> { "p [data-link]" #> <menu href> & "p *" #> <menu text> & }
Renders a specific, named item, based on the name given in the Menu's Loc paramter:
Renders a specific, named item, based on the name given in the Menu's Loc paramter:
val menus = Menu(Loc("a",...,...,LocGroup("test"))) :: Menu(Loc("b",...,...,LocGroup("test"))) :: Menu(Loc("c",...,...,LocGroup("test"))) :: Nil
You can then select the item using the name attribute:
<lift:Menu.item name="b" />
The menu item is rendered as an anchor tag (<a />). The text for the link defaults to the named Menu's Loc.linkText, but you can specify your own link text by providing contents to the tag:
<lift:Menu.item name="b">This is a link</lift:Menu.item>
Additionally you can customize the tag using attributes prefixed with "a":
<lift:Menu.item name="b" a:style="color: red;" />
The param attribute may be used with Menu Locs that are CovertableLoc to parameterize the link
Normally, the Menu item is not shown on pages that match its Menu's Loc. You can set the "donthide" attribute on the tag to force it to show text only (same text as normal, but not in an anchor tag)
Alternatively, you can set the "linkToSelf" attribute to "true" to force a link. You can specify your own link text with the tag's contents. Note that case is significant, so make sure you specify "linkToSelf" and not "linktoself".
Renders the title for the current request path (location).
Renders the title for the current request path (location). You can use this to automatically set the title for your page based on your SiteMap:
⋮ <head> <title><lift:Menu.title /></title> </head> ⋮
HTML5 does not support tags inside the <title> tag, so you must do:
<head> <title class="lift:Menu.title"e;>The page named %*% is being displayed</title> </head>
And Lift will substitute the title at the %*% marker if the marker exists, otherwise append the title to the contents of the <title> tag.
This built-in snippet can be used to render a menu representing your SiteMap. There are three main snippet methods that you can use:
More detailed usage of each method is provided below