Overview

The purpose of navigation is to make it easy for the user to:

  • know which page he is currently visiting,
  • find other pages he may want to visit.

When viewing a Portofino page in a browser there are several elements that serve this purpose, namely:

  • The page URL in the browser's URL bar.
  • The sidebar, which shows the page hierarchy and highlights the page that is currently visited.
  • The breadcrumbs, which shows the path from the root page to the current page.
  • The "Return to parent" button, which takes the user to the parent of the current page. This button can take different names depending on the context. 

The following picture shows an example situation when visiting the page at "/projects/report".

The sidebar

The sidebar contains a compact representation of the page hierarchy. In the default template the sidebar works as follows:

  • The root pages are listed in a section at the top.
  • The root page that is in the path is highlighted.
  • The children of the highlighted page are expanded/listed in a section below the previous section.
  • The child page in the path is highlighted and further expanded.
  • The current page is highlighted more prominently.
  • As a last section, the child pages (if any available) of the current page are expanded. 

In the example screenshot:

  • The top section contains the root pages: "Welcome", "Projects", "People"
  • "Projects" is highlighted because it's in the path.
  • "Projects" is expanded into its children: "report"
  • "Report" is highlighted as the current page.
  • "Report" has no child pages to expand.

The advantage of this sidebar is that it is visually compact and it expands vertically, rather than horizontally, as the number of levels in the hierarchy grows. 

The sidebar may have other visual representations or may not be present at all, depending on the page template in use.