Portland Community College | Portland, Oregon Portland Community College

Breadcrumbs

Breadcrumbs appear on most pages, and let you know where you are on the website by providing links back up the folder hierarchy to the PCC homepage. The breadcrumbs make it easy to backtrack on the website.

Development info

  • Stylesheet location: /source-v6/styles/base/_global.scss
  • Same across all template variations.
  • Note that each folder shown in the breadcrumbs must have an index page, otherwise a 404 page will display for that link.
  • The folder names are determined by converting hyphens to spaces and capitalizing each word (/academic-programs/ = Academic Programs). Name variants can be hard-coded into the script if needed.

Styling

JavaScript creates and inserts the links at the top of the content area.

CSS removes any top margin and padding from the first element of any kind after the breadcrumbs. This makes sure there’s equal space between the breadcrumbs and the first element in the content area on all pages.

Responsive behavior

No change.

Example breadcrumbs