Add a navigation using partials

Since we have more and more actions now and like everybody else we are lazy, we add a navigation now to our layout HTML file. Then we don’t have to enter the URL for each action anymore, we can just click the correct link.

Create the partial

First we have to create the partial that we include in our layout later.

<section id="navigation">
    <ul id="trans-nav">
        <li>
            <f:link.action action="index" controller="Event">Home</f:link.action>
        </li>

        <li>
            <a href="#">Events</a>
            <ul>
                <li>
                    <f:link.action action="list" controller="Event">List</f:link.action>
                </li>
                <li>
                    <f:link.action action="add" controller="Event">Add</f:link.action>
                </li>
            </ul>
            </a>
        </li>

        <li>
            <a href="#">Locations</a>
            <ul>
                <li>
                    <f:link.action action="index" controller="Location">List</f:link.action>
                </li>
                <li>
                    <f:link.action action="new" controller="Location">Add</f:link.action>
                </li>
            </ul>
        </li>
    </ul>
</section>
<br class="clear"/>

<li>

<f:link.action action="index" controller="Event">Home</f:link.action>

</li>

<li>

<a href="#">Events</a>

<ul>

<li>

<f:link.action action="list" controller="Event">List</f:link.action>

</li>

<li>

<f:link.action action="add" controller="Event">Add</f:link.action>

</li>

</ul>

</a>

</li>

<li>

<a href="#">Locations</a>

<ul>

<li>

<f:link.action action="index" controller="Location">List</f:link.action>

</li>

<li>

<f:link.action action="new" controller="Location">Add</f:link.action>

</li>

</ul>

</li>

</ul>

</section>

Include it in your layout

After we created the partial we just have to include it in our layout so that the navigation is available on all pages.

<!DOCTYPE HTML>
<html>
    <head>
        <title>TYPO3 Flow - Tutorial</title>
        <f:base/>

    <link rel="stylesheet" href="{f:uri.resource(path: 'Css/style.css')}" type="text/css" media="all" />
    <link rel="stylesheet" href="{f:uri.resource(path: 'Css/navigation.css')}" type="text/css" media="all" />
    <link rel="stylesheet" href="{f:uri.resource(path: 'Css/messy-list.css')}" type="text/css" media="all" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="{f:uri.resource(path: 'Js/jquery.ui.core.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path: 'Js/jquery.ui.datepicker.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path: 'Js/Scripts.js')}"></script>

    </head>
<body>
    <section class="content">

        <f:render partial="Navigation" />

        <f:render section="content"/>

    </section>

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>TYPO3 Flow - Tutorial</title>

<f:base/>

</head>

<body>

<f:render partial="Navigation" />

<f:render section="content"/>

</section>

</body>

</html>

Now you should see the navigation in each of your actions.

It looks ugly

Additional in this step I added some CSS and JS to make it look better. JS is used later when we want to work with jQuery and Ajax.

If the Css and Js files are not loaded, check your permissions and make sure that:

Options Indexes FollowSymLinks

is set in your apache config.

Your homepage now should look like: