Building Navigations

Having a helpful navigation is crucial to the success of a website. Scrivito offers several approaches to creating navigations, so you can choose the right tools for the website you are building.

Essentially, all website navigations are made up of links pointing to other pages. Think of a navigation as a list of links to pages the user is offered to visit. So, the core task of building a navigation is to determine the pages it should link to.

Scrivito offers three approaches to this task:

  • Utilizing the hierarchy of CMS objects
  • Maintaining navigation items manually
  • Computing navigation items

These approaches can be combined with each other. You'll probably need to mix and adjust them to satisfy more complex use cases.

Hierarchical navigations

A common approach to structuring a website is to organize the content hierarchically, i.e. moving from the general (the homepage) to the specific (a sub-page).

When using a hierarchy, the pages of the website form a tree whose root is represented by the homepage. Top-level pages are the children of the homepage, subpages are the children of the top-level pages, and so on.

In Scrivito, we call this the page hierarchy. It is defined by the BasicObj#_path system attribute.

The hierarchy defines a parent-child relationship between pages. The homepage, for example, is the parent of “/about_us,” and “/about_us/career” is a child of “/about_us.”

Not every page needs to be part of the hierarchy. It is possible (and often advisable) to keep pages away from the hierarchy, denying them a parent as well as children. More about that later. Take a look at Working with Hierarchical Content for details on how to access path components programmatically.

Typically, the path of the homepage is “/,” a top-level page has a path like “/about_us,” and a sub-page might have a path like “/about_us/career.” You can think of the _path attribute as being similar to the path of a file in a file system.

With websites organized hierarchically, you can generate a navigation simply by using the children list of a specific CMS object, which is part of the hierarchy, as a navigation list. For details, see Navigating the Page Hierarchy.

Note that you can manage more than one website with a single Scrivito CMS. In this case, each website is represented by a child of the root path, ”/.” For an example, see Creating Multi-Language Websites.

When to use a hierarchy

A hierarchy is the most popular approach for reflecting the structure of larger amounts of content on a typical company website, i.e. “documentation,” “investors,” “our products,” etc. If this applies to your website, thinking about organizing its content hierarchically is a good starting point.

Limitations of the hierarchical approach

A hierarchical navigation has certain limitations: For one, it always and completely sticks to the hierarchy, so navigating is moving from a parent to one of its children. A navigation item that links directly from the homepage to a sub-subpage is tricky to implement and hard to maintain. Also, a hierarchical navigation always links within your own website only. Including links pointing to other websites is not possible (or complicated). If you require such links in navigations based on children, best take a look at the manual approach.

Another aspect of hierarchy-based navigations is that they can become quite expanding. While Scrivito will scale to extremely large hierarchies without any technical problems, having a large hierarchical navigation is often confusing for visitors: If there are too many levels in the hierarchy (i.e. sub-sub-subpages and so on), visitors tend to get lost and have difficulties remembering how to find a particular piece of information.

Also, it is sometimes not easy to decide where a page belongs in a hierarchy. In a large hierarchy, there is often more than one possible place for a given page. But using a hierarchy forces the author to choose just one place. This may leave the visitor frustrated if the choice was not what the visitor would have expected.

If you are facing the problem of a hierarchy growing too large (or too difficult to navigate), you might want to look at computed navigations.

When not to use a hierarchy

A common case in which a hierarchical navigation is probably a bad idea, is a constantly growing collection of pages of any kind. While you will typically only have one “contact” page, there will usually be a new blog post every few days or weeks, so the number of BlogPostPages will get large, sooner or later.

The same applies to press releases, event announcements, job offers or pages for individual products in a large web shop. These kinds of pages would soon outgrow any hierarchy, so it’s a good idea to keep them out of the hierarchy from the beginning. 

So, technically speaking, a BlogPostPage should not have a path (i.e. the _path system attribute should be nil).

This is usually solved by putting a single overview page for blog posts (or press releases or job offers) into the hierarchy, for example a BlogOverviewPage with the path “/blog.” If such an overview page is equipped with a suitable computed navigation (see below), the visitor can jump to any individual blog post.

Another example of pages that don’t belong into a hierarchy are those that should not be accessible through a navigation. Websites often have special landing pages for visitors that come in from advertisement campaigns or other special sources. Such landing pages are intended only for those targeted visitors and should not be visible otherwise. It's a best practice to place these pages outside the hierarchy to not link to them in a hierarchical navigation.

Manual navigations

A manual navigation is essentially a list of links website authors can compile without any restrictions. This accommodates use cases in which hierarchical navigations don't work, for example:

  • Deep linking (e.g. from the homepage directly to a sub-subpage)
  • Pointing to other websites
  • Pointing to page fragments (a specific section of a long page)

A manual navigation is typically implemented by defining an attribute of the linklist type for storing the links. See Using Link Lists and References for details.

When to use manual navigations

Many websites have header and footer navigations that appear on every page and complement the main navigation. Since these navigations often have special requirements (like linking to other websites) and rarely change, they are often implemented as manual navigations based on a linklist attribute defined in the homepage class.

When not to use manual navigations

Manual navigations offer the greatest degree of freedom to website authors, so it’s tempting to use them everywhere. Keep in mind, however, that with great power comes great responsibilty: As the name suggests, manual navigations need to be maintained manually. While a hierachical navigation updates automatically as children are added to or removed from the hierarchy, a manual navigation does not.

If your website includes a large amount of pages, having to manually maintain navigation links to each and every page will become tedious for website authors. And, if authors fail to properly maintain the manual navigation, it will become outdated and inconsistent, leading to a confusing experience for your visitors.

Computed navigations

Computed navigations are generated dynamically according to rules defined by you, the website developer.

A simple example

A simple example of a computed navigation can be seen on most blogs: The starting point of a blog is an overview page that simply links to the latest ten or so blog posts.

With Scrivito, this can be solved by searching for pages using BasicObj.where, for example like this:

Copy
posts = BlogPostPage.all.order_by(release_date: "desc").take(10)
For a more extensive example, see the tutorial on Creating a Small News Site.

Using tags

A more sophisticated approach to computed navigations is the use of tags. Adding a “tags” attribute to pages enables authors to tag each page according to the topics it covers.

You can then programmatically determine the most popular tags (using the ObjSearchEnumerator#facet method) and build a navigation from this information, allowing visitors to select a tag they're interested in. This results in a dynamically generated navigation that includes all the pages associated with this tag.

This technique lets your visitors quickly find what they are looking for in a large number of pages, without imposing too much maintenance effort on your authors.

Also, using tags obliviates the above-mentioned need to find the one and only position of a page in a hierarchy. Since each page can have as many tags as authors deem appropriate, the limitation of having to put a page into just one category doesn't exist.

If you'd like to build a small navigation using tags, see Creating a Blog.

Multifacted navigations

An even more sophisticated approach to computed navigations is to allow your pages to be categorized using multiple criteria. Many large web shops utilize this technology, enabling their customers to browse through products by their type, manifacturer, color, etc.

Applied to a typical company website, you could, for example, make a large number of press releases easily accessible by letting your visitors browse them either by year, topic, author, or by any other criteria of your choice.

This approach is a good fit if you want to make a large number of pages accessible, provided that the pages have well-maintained metadata (author, topic, date, price, color, and so on).

With Scrivito, such navigations can be implemented by combining faceted searches and common searches. The faceted searches serve to determine the values assigned to the category attributes across your content. They deliver the available starting points for a subsequent search that lets you create the navigation according to the criteria selected by the visitor.