Creating Advanced Sitefinity Navigations

It’s common for developers to create customized navigations using a mixture of custom widgets, static HTML (the fact that it’s in a content block doesn’t change things), and configuration files. While this can work, the end result usually causes performance problems and frequently completely disassociates the site navigation from the sitemap, making it difficult for end users to make changes to it.

In this tutorial, I’ll walk you through creating a custom Sitefinity navigation like the one on the Quantum Computers example site – only this one will make all of the dropdowns awesome.

If you’d like to follow along with the tutorial, you’ll need to download and install the Quantum sample site from GitHub. If not, don’t worry, you’ll be able to re-use the techniques outlined in this tutorial to create totally custom Sitefinity navigations in your own projects.

Before We Get Started – Fixing the CSS

If you intend to follow along, we need to take a moment to make a few necessary changes to Quantum’s main.css. If you’re not following along on the Quantum site, you can just skip this part.

The line:

.topnav .k-menu .k-item:first-child .k-group { width: auto; min-height: 0; padding: 0; background: 0 0; }

…needs to be changed to:

.topnav .k-menu .level-0.mega { width: auto; min-height: 0; padding: 0; background: 0 0 !important; }

Also, the line:

.topnav .k-menu .k-item:first-child .k-group { min-height: 265px; padding: 10px 321px 0 0; background: #fff url(../img/promo1.jpg) no-repeat right top; }

needs to be changed to:

.topnav .k-menu .level-0.mega { min-height: 265px; padding: 10px 321px 0 0; background-color: #fff; background-repeat: no-repeat; background-position: right top; }

The Sample Project

The screenshot below shows what we’re going to build.

MainImage

The “Products” dropdown has two custom elements that make it a bit more complicated (and aesthetically pleasing) than the standard Sitefinity navigation dropdowns: a background image, and some additional text that appears under the page titles.

Compared that to the standard dropdown that’s used for “Online Shop”, the “Products” menu looks pretty awesome! Below is what the out-of-the-box dropdown that’s used for “Online Shop” looks like:

online_shop

In order for us to put those custom elements in all of the dropdowns, we need to have some place to store the information. That’s where custom page fields come in.

Custom Page Fields

From the Sitefinity documentation:

As of Sitefinity 7.0, you can use custom fields for pages to add additional information to a page using user-defined fields.

Like it says, since Sitefinity 7.0, we’ve had the ability to store additional, user-defined, pieces of information within the pages of our sites. That’s great since that’s exactly what we need to do!

For more information about custom page fields, check out the Telerik Sitefinity documentation.

Creating the Custom Page Fields

Navigate to the Sitefinity backend and, from the main menu, click Pages.

pages

Once you’re there, look for the management pane (it should be on the right-hand side of the screen).

pages_settings

In the “Settings for pages” section, you should see the “Custom fields” link. Click it.

Sitefinity will load up the “Page data fields” screen which displays all of the fields that make up the pages of our site – that includes any custom fields that may already exist, along with all of the default fields.

pages_defaults

Some of these may look familiar – fields like “Title” and “ShowInNavigation” are commonly used when creating and managing pages in Sitefinity.

Additional Text

The first custom field we need to add is one where we can store the additional text that appears below the page titles. In the example below, this would be the “For business or fun” line that appears under “Notebooks”.

for_business

To get started, click the “Add a field…” button located in the “Custom fields” section.

pages_custom

In the “Add a field” dialog, select “Short text” as the type, and give the field a name. For this example, let’s use “AdditionalText”.

add_field

After filling out this form, click the “Continue” button to proceed to the “Settings” view of the dialog. The “Settings” view is where we can define values for some of the more advanced options of the field. The only thing that I’ve done (for aesthetic reasons) is pretty up the label text by adding a space between the words “Additional” and “Text”.

field_settings

That’s it for this one. Click the “Done” button to continue.

Background Image

The next field we’re going to create is a custom field where we can store information about the background image for our dropdowns. Just like before, click the “Add a field..” button, located in the “Custom fields” section.

additional_text

In the “Add a field” dialog, choose “Related media (images, videos, files)” for the type and give it the name “BackgroundImage”.

background_image

Click the “Continue” button to proceed.

Again, I’m going to add a space between the words in the label field, just to make things look pretty.

image_selector

I think it’s important that we only allow one image to be selected in this field. Since we’re only going to use one image as the background for any given dropdown, allowing users to select more than one image (the default) may just frustrate users.

To make this change, click on the “Limitations” view and change the number of images that can be selected from “Multiple images” to “Only 1 image can be uploaded or selected”.

limitations

I’ve limited the types of images that can be selected to .jpg, .jpeg, .png, and .gif by un-checking the “.bmp” and “.odg” options.

To help keep background images from causing page bloat, it may be a good idea to limit the max file size of the images that can be selected. As this isn’t a huge worry for me right now, I’ll leave it as is [blank].

After making the changes to the limitations, click the “Done” button to continue.

save_changes

When the page refreshes, both of our custom page fields should be visible in the “Custom fields” section. All that’s left to do here is click the “Save changes” button to make the additional fields usable.

Custom Widget Templates

Widget templates allow us to control the markup generated by widgets that use them. They come in handy when we need to modify the HTML that’s rendered by the out-of-the-box Sitefinity widgets.

For more information about widget templates, I encourage you to check out the Sitefinity Documentation.

Building our Custom Widget Template

Widget templates can be accessed through the main menu by clicking Design > Widget Templates.

widget_templates

To keep this tutorial readable, I’ve offloaded the widget template markup to a GitHub Gist To use it, simply copy the source from the Gist, paste it in the “Horizontal with dropdown menus” widget template, and then click the “Save changes” button.

horizontal_nav

In order to understand why we’re modifying the widget template in the first place, let’s take a look at the important parts.

Custom background images in the dropdowns

Fact: We’re able to set different markup for the different levels of items in our navigation.

By using a customized “Level=’0′” template, we can render different markup for our top-level items than what is rendered for the child items.

In this specific case, the template looks to see if a background image has been set for the current DataItem [page]. If it has, it adds the “mega” class to that item’s container [the dropdown] and generates a bit of inline styling to set the individual background image.

Note: At least one NavigationTemplate without a “Level” needs to be present in the widget template. That’s because it’s the one used as a “catch all” for any level that hasn’t been explicitly set.

Additional Text under Page Titles

In the “catch all” template, code has been added that will output the value set in “AdditionalText” if it’s preset.

Setting Values for Individual Pages

Now that we’ve defined our custom page fields, and implemented a widget template that uses those fields, it’s time to start populating values.

The custom fields we just defined can be accessed through the page actions menu by clicking on Actions > Title & Properties.

actions

In this example, we’re going to dress up that “Online Shop” section. For reference, here’s a before shot:

online_shop

In the Sitefinity backend, navigate to the “Title & Properties” menu for the Online Shop page, then scroll down to the lower part of the screen. That’s where our custom page fields should be.

Setting the Background Image

The background images for our custom navigation are set on the top-level pages. Since Quantum has designated “Online Shop” as one of those, that’s where I’ll set the background image.

To select an image, click the “Select image” button.

related_media

Once I’ve made a selection, a thumbnail of the image that was selected will be displayed under “Background Image”.

related_media2

Now, click the “Save changes” button to save the selection.

It’s time for a quick sanity check

To make sure we’ve added the fields correctly, and that the new widget template is being used, let’s switch back over to the front-end of our local Quantum instance and refresh the homepage.

Since a background image has been selected for the “Online Shop”, it should be visible when that navigation item is hovered over.

nav_hover

Since everything seems to be working up to this point, it’s now time to set the custom text that will be displayed under the page titles.

Setting the Additional Text

The last thing we need to do to finish setting up our custom navigation is to set all of the additional text that will be displayed below the page titles.

Since the new widget template is only displaying the text that’s set on the immediate child pages of the top-level navigation, those are the ones we need to modify; let’s start with “Shop”.

actions2

To access the “Title & Properties” for “Shop”, use the “Actions” menu. Once that page loads, scroll down to the bottom and set some text in the Additional Text field.

additional_text2

Click the “Save changes” button to continue.

Time for another sanity check

To make sure that the new text is being stored correctly, and that the widget template is rendering it as expected, let’s switch back to the Quantum homepage and do a refresh.

additional_text_home1

Since everything is rendered as expected, we just need to go through and set values for the “Additional Text” field on all the child pages of “Online Shop”.

additional_text_home2

That’s it! Now it’s just a rinse-and-repeat type of thing to set up the fancy dropdowns for the other top-level navigation items.

Further Exploration

This tutorial only scratches the surface of what’s possible. In later tutorials, we’ll explore using more complex widget templates (paired with dynamic content and a few other tricks) to create even more awesome types of navigation.

Have something to add? Let me know in the comments!

Comments

  • Decker Ploehn II

    Hey Tim,

    How about an MVC example?

    Good Post….btw. Thank you!