silverstripe-framework/docs/en/02_Developer_Guides/01_Templates/How_Tos/01_Navigation_Menu.md

831 B

title: How to Create a Navigation Menu

How to Create a Navigation Menu

In this how-to, we'll create a simple menu which you can use as the primary navigation for your website. This outputs a top level menu with a nested second level using the Menu loop and a Children loop.

mysite/templates/Page.ss

:::ss
<ul>
	<% loop $Menu(1) %>
		<li>
			<a href="$Link" title="Go to the $Title page" class="$LinkingMode">
				$MenuTitle
			</a>

			<% if $LinkOrSection == section %>
				<% if $Children %>
					<ul class="secondary">
						<% loop $Children %>
							<li class="$LinkingMode"><a href="$Link">$MenuTitle</a></li>
						<% end_loop %>
					</ul>
				<% end_if %>
			<% end_if %>
		</li>
	<% end_loop %>
</ul>