Sidebar navigation
The sidebar navigation is located at the top of the sidebar, above any callouts. It links to sibling-level 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.
Development info
- Stylesheet location:
/source-v6/styles/layout/_sidebar.scss
- In Dreamweaver, use the
Layout
template property- Default value:
two-col
– includes sidebar - Alternate value:
one-col
– doesn’t include sidebar
- Default value:
- In WordPress, check or uncheck the “Include sibling navigation” option in the PCC Sidebar settings box.
- View more information about the WordPress sidebar navigation in Spaces.
- Adding additional navigation sections:
<h3>Section heading</h3> <ul class="side-nav"> <li><a>Item 1</a></li> <li><a>Item 2</a></li> <li><a>Item 3</a></li> </ul>
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. Additional navigation menus (Profiles in this example) don’t have the background image.
Responsive behavior
On small screens, the sidebar moves below the content, but its appearance doesn’t change.