[ skip to content ]

1.7 The Sidebar

The sidebar is the section-off area of the page that is always located on the right side. The sidebar spans five grid columns.

Purpose of the Sidebar

The sidebar should be used for secondary and related information and links. Contact information should always appear at the top of the sidebar, unless the page's content makes having contact information inappropriate or out-of-place. The sidebar should not be used to re-create menu-style naviagtion similar to the legacy website.


By default, a page's sidebar is inherited from its parent page. This inheritance should be kept as far as is appropriate. Information within a particular section of the site should not be so different from page ot page that the related information contained in the sidebar needs to be changed from page to page. The sidebar should only be changed at the top of a new subsection of the site.

Editing the Sidebar

You can add to the inherited sidebar, either above or below it. To enable editing, you must click Edit on the inherited sidebar's control bar and then click OK in the dialog that appears (you do not need to change the settings). You will see a new dropzone at the bottom of the inherited sidebar and a control bar with New... at the top. You can use the New... button to add components above the sidebar and the dropzone to add components below it.

When you click Edit in the control bar of the inherited sidebar, you are presented with two checkboxes: Cancel Inheritance and Disable Inheritance.

Cancel Inheritance

If, for some reason, you will be creating new subsections below a particular page and the sidebar on the current page would not be applicable to the child pages, you would check Cancel Inheritance and click OK. Cancelling inheritance confines the sidebar to just that page.

Disable Inheritance

If you are at the top page of a new subsection of the site and you need to set a new sidebar for that subsection because the inherited sidebar is not appropriate for that section, you can select Disable Inheritance and CQ will give you a blank slate with which to work in the sidebar. Disabling inheritance prevents the parent page's sidebar from coming down to the current page.

Sidebar Style Guide

For consistency, certain style rules must apply to the sidebar. The sidebar must start with the contact information for the office or offices responsible for the content on that page. The contact information must be created using the Contact component. For multiple responsible offices, the Contact component has a multi-select list. The only exceptions to this standard are:

  • The page is primarily a router page where the user should choose a path and move on to another part of the site.
  • There are more than two offices responsible for the information on the page.

The Facebook Like component should only be used in the sidebar. If used, it should appear directly under the Contact component.

List components in the sidebar should be configured using a combination of the sidebar layout and a sidebar style.

All Section components in the sidebar must have a layout. If the gradient or solid background is not desire, you must set the section layout to Padded Teaser.

< Previous Topic Next Topic >