PixelPilot: Instructions file for GitHub Copilot

UI/UX Navigation Extras 2026

Breadcrumbs, pagination, tabs, accordions, collapsible sidebars, bottom sheets, and command palettes (cmdk).

---

1. BREADCRUMBS (A11y-First)

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="/">Home</a></li>
    <li class="breadcrumb__item"><a href="/products">Products</a></li>
    <li class="breadcrumb__item" aria-current="page">New Arrivals</li>
  </ol>
</nav>

.breadcrumb__list {
  display: flex;
  list-style: none;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  opacity: 0.5;
}

.breadcrumb__item a:hover { color: var(--accent); }
.breadcrumb__item[aria-current="page"] { color: var(--text); font-weight: 600; }

---

2. PAGINATION (Numbered + Selectors)

<nav aria-label="Pagination" class="pagination">
  <button class="btn btn--icon" aria-label="Previous page"><i data-lucide="chevron-left"></i></button>
  <div class="pagination__pages">
    <button class="btn btn--page active" aria-current="page">1</button>
    <button class="btn btn--page">2</button>
    <span class="pagination__ellipsis">...</span>
    <button class="btn btn--page">12</button>
  </div>
  <button class="btn btn--icon" aria-label="Next page"><i data-lucide="chevron-right"></i></button>
  <select class="pagination__size" aria-label="Items per page">
    <option>10</option><option>25</option><option>50</option>
  </select>
</nav>

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.btn--page {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}

.btn--page.active { background: var(--accent); color: white; }

---

3. TABS (Animated Indicator)

<div class="tabs" id="main-tabs">
  <div role="tablist" class="tabs__list">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Overview</button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Settings</button>
    <div class="tabs__indicator"></div>
  </div>
  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>
</div>