Web services

Sidebar navigation

The sidebar navigation is located at the top of the sidebar, above any callouts. It links to sibling-level pages and any child pages.

If the page you’re viewing has any child pages, those pages will be displayed in the sidebar nested below your current page. If there are more than five child pages, a “view more” link appears as a sixth item – this keeps the sidebar from becoming too long if there are a large number of child pages.

WordPress automatically creates the sidebar navigation based on sibling and child pages. Before moving to WordPress, it was possible to divide the navigation into sections, each with its own heading. This is no longer possible, but you can include callouts below the navigation to provide links to additional resources.

Styling

The parent-level heading is highlighted in sapphire, and uses the same background image as the site title. The current page is highlighted with a vertical turquoise line.

Responsive behavior

On small screens, the sidebar moves below the content, but its appearance doesn’t change.

Development info
  • Stylesheet location: /_source/styles/layout/_sidebar.scss
  • In Dreamweaver, use the Layout template property
    • Default value: two-col – includes the sidebar
    • Alternate value: one-col – doesn’t include the sidebar
  • In WordPress, check or uncheck the “include sibling navigation” option in the PCC sidebar settings box.

Sidebar navigation example