• Sitefinity Tips

Customizing your navigation using pre-built templates

Share

One powerful characteristic of Sitefinity is the ability to customize your website as much or as little as you like, an ability which extends to your site’s navigation. Sitefinity provides a variety of solutions for users looking to change the template of their site’s navigation widget. Moreover, there are many ways to do so with varying degrees of complexity - so let’s start with the easiest way to change your site’s navigation.

While these examples show the use of a pre-built Sitefinity page template, these steps work for custom page templates as well. If you are using a custom page template, both processes assume that a content placeholder for your navigation has been added to the custom template that you are using.

Using Pre-Built Sitefinity Navigation Templates

Navigate to the page template editor through the Sitefinity back-end. To do so, click on the “Design” tab in the Sitefinity navigation and then click “Page Templates”. Then click on the page template you wish to edit to navigate to the template editor.

Sitefinity navigation tips 1

If there is no navigation widget present, drag and drop the navigation widget into the section of your template where you would like it to appear. Navigation widgets can be accessed on the right side-panel under “Navigation”. Please select the non-MVC widget.
Flywheel strategic sitefinity navigation tips 2


flywheel strategic Sitefinity navigation tips 2.2

Click edit on the top right corner of your navigation widget to bring up the menu shown below. 

flywheels strategic Sitefinity navigation tips 3

Underneath the “Template” section, a drop-down menu indicates which templates are available for the widget to use. Sitefinity provides several pre-built options to select:

Horizontal (one-level)

Navigation items are laid out in a single horizontal row. Only top level pages will be shown (no child pages or children of child pages will be shown).

Horizontal with drop-down menus

Navigation items are laid out in horizontal rows. Hovering over a navigation item with child pages will show the page’s child pages.

Horizontal with tabs (up to 2 levels)

Navigation items are laid out in a horizontal row. Child pages of a page are displayed in a horizontal row below the first row.

Sitemap in columns (up to 2 levels)

Navigation items are laid out in columns grouped by parent and child pages such that child pages appear below their parent page.

Sitemap in rows (up to 2 levels)

Navigation items are laid out in rows grouped by parent and child pages such that child pages appear in a row below their parent page.

Vertical (one-level)

Navigation items are laid out in a single vertical column. Only top level pages will be shown (no child pages or children of child pages will be shown)

Vertical with sub-levels (also know as tree-view)

Navigation items are laid out in a single vertical column. Child pages can be shown/hidden by clicking the expand/collapse icon to the left of their parent page.

Select the template you would like to use and click the “Save” button.

To learn how to create entirely new navigation templates, click here.

Back to Top Arrow Up