I inherited a Drupal 7.22 site that uses Panels 7.x-3.2 (and Panels Everywhere 7.x-1.0-alpha1 and Ctools 7.x-1.3) and I've tried Panels Breadcrumbs module for the breadcrumbs. The site has a few panel pages that features content in tabs using CSS (see screenshot, script also pasted below). The content featured within each tab is a mini panel. The label for each tab is not a menu item.

I was wondering if it was possible to generate separate breadcrumbs for each tab...so for example, if you were on Tab2, the breadcrumb would display as Home > [Top-Level Section Name] > [H1 of page] > Tab2. And if you were on Tab3, the breadcrumb would display as Home > [Top-Level Section Name] > [H1 of page] > Tab3. Currently, the URL does not change when you click between tabs.

I'm thinking I may need to change the way the content is currently displayed. I tried creating a panel page for the content featured in each tab and linking the tabs to the new pages, but the URLs do not change when I click between tabs, even when it's hyperlinked to a page.

I've also looked into Path Breadcrumbs and Crumbs, but haven't gotten them to work.

Script for Tabs (used within Panel Page):

<ul class="tabs implicit" id="page_tabs"><li class="open"><a>Tab1</a></li>

CSS for Tabs:

ul.tabs {
    position: relative;
    left: 0;
    margin-left: 0 !important;
    display: block;
    width: 855px;
    height: 41px;
    margin: 0;
    padding: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 25px;
    /* Resetting Styles */
    padding-left: 32px;
    padding-top: 3px;
    padding-right: 32px;
    list-style: none;
    background: url("img/bg-orange.png") repeat-x; }
ul.tabs li {
    float: left;
    margin-right: 5px;
    padding: 10px 15px 6px 15px; }
ul.tabs li:hover, ul.tabs li.open {
    color: #000 !important;
    background: #FFF;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    cursor: pointer; }
ul.tabs li:hover a, ul.tabs li.open a {
    color: #000; }
ul.tabs li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    font-size: 14px;
    font-weight: bold; }

Any guidance/advice would be great.

| improve this question | | | | |
  • Just to clarify - the tabs are switched with js? Then either the breadcrumb needs to be manipulated and updated with js, or 3 different breadcrumbs need to be prepared on server side (one for each tab). These could even be part of each tab's content html. – donquixote Aug 21 '13 at 3:18
  • Also, do you know of any existing site out there where the breadcrumb depends on js / ajax switches? It could be interesting to study. – donquixote Aug 21 '13 at 3:23
  • @donquixote, Thanks for the tip! Yes, the tabs are switched with js and after some digging, I realized it was using 3 different js files (!) and was finally able to get it to work by creating separate pages for each tab. Thanks again – ForTheWin Aug 21 '13 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.