SPEAK Common Navigation Menu

Usually in your Sitecore SPEAK application you may have more than one pages in the application. Like any other application how do you tie them together through a common navigation which you want to maintain at one place rather than repeating it on every page. Here is a small post which will help you in achieving that.

1. Let us assume you have 3 pages in a SPEAK application called "NewApp" as shown in the Pages folder in the picture below






Speak Application Structure

2. I also created a Navigation folder to maintain navigation related items in one place. This folder contains items of type "HyperlinkButton Parameters" and I added 3 items one for each page as shown below






3. Now configure each HyperlinkButton parameter item to point to a page you want to navigate to in its properties windows (when you double click that item in Sitecore Rocks - Sitecore explorer) - as shown below






4. Do the same thing for Dashboard and EventListing pages



5. Now setup the HyperlinkButton group on the Dashboard page with placeholder key as ApplicationContent.Navigation and Datasource location as shown below










6. Set the SelectedItemId of HyperlinkButton Group component to the the Dashboard Hyperlinkbutton properties definition item as shown in the above diagram



7. Repeat steps 5 and 6 for Event Listing and Event Detail page setting SelectedItemID to respective Hyperlinkbutton properties definition item. If on other pages you dont have ApplicationContentNM or ApplicationContentNMI components - you may need to replace ApplicationContentMI component with the one of these two to have ApplicationContent.Navigation placeholder available for you to assign your HyperlinkButtonGroup component in that placeholder.



8. Finally it should look like this

Hope this helps.