Exercise 7.3: Breadcrumbs
Last updated
Was this helpful?
Last updated
Was this helpful?
Now that we’ve added a custom URL alias and all job postings inherit the common URL pattern, let’s link our breadcrumb to the URL alias and explore how we can improve the user interface by manipulating breadcrumb links.
In Unit 6 we created a View called Job Posting and added a link to the top Main Navigation menu (Exercise 6.2).
The Breadcrumb link Job Postings was added by GovCMS for you.
At the moment, when we access any of the Job Posting content, the breadcrumb does not show the link to the Job Postings page. This creates a UX problem as site visitors don’t have a visual guide of the site section they’re currently in:
We want to change the breadcrumbs so that when a Job Posting page is displayed, the breadcrumb shows the link to the parent Jobs page:
The Breadcrumb links are constructed from the URL of the current page and checking if the sub-path matches any page on the site. If it does, the system pulls the title of that page and creates a breadcrumb link.
Our parent page (Jobs) URL is /job-postings and our Job Posting content URL pattern is /jobs/[node:title]. To get the Jobs page link added to the breadcrumb, all we have to do is to change its URL from /job-postings to /jobs. This way it will natively flow into the existing URL pattern for Job Posting content type and the link will be automatically generated in the breadcrumb.
Navigate to the Structure → Views and edit our Job Postings view.
Locate Path under Page Settings (middle top section).
Edit the Path, change it to /jobs.
Save the view
Test the breadcrumb by navigating to any Job Posting content. You should now get the Job Posting link in the breadcrumb.
