Generate Breadcrumbs for Tabbed Content (via Panels and Mini Panels)

Generate Breadcrumbs for Tabbed Content (via Panels and Mini Panels)

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>
<li><a>Tab2</a></li>
<li><a>Tab3</a></li>
</ul>
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.
Thanks!