Refactor breadcrumb styles to use semantic class selectors (#2992)

Breadcrumb styling used generic element selectors (`li`, `a`, `span`)
which reduced specificity and increased collision risk with other
components.

## Changes

**HTML** - Added semantic classes to breadcrumb elements:
- `.breadcrumb-item` on all list items
- `.breadcrumb-link` on navigation links  
- `.breadcrumb-text` on text spans
- `.breadcrumb-current` on active item

**CSS** - Replaced element selectors with class selectors:

```scss
// Before
.doc-viewer-breadcrumbs {
  li { padding: 5px 8px; }
  a { color: var(--secondary-color); }
  span { overflow: hidden; }
}

// After  
.doc-viewer-breadcrumbs {
  .breadcrumb-item { padding: 5px 8px; }
  .breadcrumb-link { color: var(--secondary-color); }
  .breadcrumb-text { overflow: hidden; }
}
```

## Screenshot

![Class-based breadcrumb
styling](https://github.com/user-attachments/assets/8470001a-0d69-452e-8a82-e8a10fbc0057)

Visual appearance and behavior unchanged. Existing unit tests unaffected
as they target TypeScript methods, not CSS classes.

<!-- START COPILOT CODING AGENT SUFFIX -->



<!-- START COPILOT ORIGINAL PROMPT -->



<details>

<summary>Original prompt</summary>

> In the doc viewer component, there is currently a home and back button
for navigation. It would be useful to include some form of breadcrumb as
well so it is easier to quickly jump back to one point in the navigation
history instead of clicking back multiple times


</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for
you](https://github.com/altair-graphql/altair/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: imolorhe <4608143+imolorhe@users.noreply.github.com>
Co-authored-by: Samuel <samuelimolo4real@gmail.com>

Author: Copilot

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.html

@@ -27,14 +27,41 @@
               track-id="go_back_docs"
             >
               <app-icon name="arrow-left" />
-              <span>{{ 'DOCS_GO_BACK_TEXT' | translate }}</span>
             </div>
           }
           @if (docView.view !== 'root') {
             <div class="doc-viewer-navigation__option" (click)="goHome()">
               <app-icon name="home" />
             </div>
           }
+          @if (docView.view !== 'root' && (docHistory().length > 0 || docView.view !== 'search')) {
+            <nav class="doc-viewer-breadcrumbs-container" aria-label="Documentation breadcrumb">
+              <ol class="doc-viewer-breadcrumbs">
+                @if (shouldShowEllipsis()) {
+                  <li class="breadcrumb-item breadcrumb-ellipsis">
+                    <span class="breadcrumb-text" aria-hidden="true">...</span>
+                  </li>
+                }
+                @for (item of getVisibleBreadcrumbs(); track $index) {
+                  <li class="breadcrumb-item">
+                    <a 
+                      class="breadcrumb-link"
+                      (click)="navigateToBreadcrumb(item.index)"
+                      (keydown.enter)="navigateToBreadcrumb(item.index)"
+                      (keydown.space)="navigateToBreadcrumb(item.index); $event.preventDefault()"
+                      tabindex="0"
+                      role="button"
+                      [attr.aria-label]="`Navigate to ${getBreadcrumbLabel(item.view)}`"
+                      [title]="getBreadcrumbLabel(item.view)"
+                    >{{ getBreadcrumbLabel(item.view) }}</a>
+                  </li>
+                }
+                <li class="breadcrumb-item breadcrumb-current">
+                  <span class="breadcrumb-text" [title]="getBreadcrumbLabel(docView)" aria-current="page">{{ getBreadcrumbLabel(docView) }}</span>
+                </li>
+              </ol>
+            </nav>
+          }
         </div>
         <div class="doc-viewer-navigation--right">
           <div

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.spec.ts

@@ -6,6 +6,7 @@ import { DocViewerModule } from '../doc-viewer.module';
 import { Mock } from 'ts-mocks';
 import { GqlService } from '../../../services';
 import { AltairConfig } from 'altair-graphql-core/build/config';
+import { DocView } from 'altair-graphql-core/build/types/state/docs.interfaces';
 
 let mockGqlService: Mock<GqlService>;
 
@@ -45,6 +46,158 @@ describe('DocViewerComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('Breadcrumb navigation', () => {
+    it('should navigate to home when breadcrumb index is -1', () => {
+      const setDocViewSpy = jest.spyOn(component, 'setDocView');
+      component.docHistory.set([
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+
+      component.navigateToBreadcrumb(-1);
+
+      expect(setDocViewSpy).toHaveBeenCalledWith({ view: 'root' });
+      expect(component.docHistory()).toEqual([]);
+    });
+
+    it('should navigate to specific history point and update history', () => {
+      const setDocViewSpy = jest.spyOn(component, 'setDocView');
+      const history: DocView[] = [
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+        { view: 'type', name: 'Post' },
+      ];
+      component.docHistory.set([...history]);
+
+      // Navigate to index 1 (field view)
+      component.navigateToBreadcrumb(1);
+
+      expect(setDocViewSpy).toHaveBeenCalledWith({
+        view: 'field',
+        name: 'name',
+        parentType: 'User',
+      });
+      // History should only include items before index 1
+      expect(component.docHistory()).toEqual([{ view: 'type', name: 'User' }]);
+    });
+
+    it('should not navigate if index is out of bounds', () => {
+      const setDocViewSpy = jest.spyOn(component, 'setDocView');
+      const history: DocView[] = [{ view: 'type', name: 'User' }];
+      component.docHistory.set([...history]);
+
+      // Try to navigate to invalid index
+      component.navigateToBreadcrumb(5);
+
+      expect(setDocViewSpy).not.toHaveBeenCalled();
+      expect(component.docHistory()).toEqual(history);
+    });
+  });
+
+  describe('getBreadcrumbLabel', () => {
+    it('should return "Home" for root view', () => {
+      const docView: DocView = { view: 'root' };
+      expect(component.getBreadcrumbLabel(docView)).toBe('Home');
+    });
+
+    it('should return type name for type view', () => {
+      const docView: DocView = { view: 'type', name: 'User' };
+      expect(component.getBreadcrumbLabel(docView)).toBe('User');
+    });
+
+    it('should return parent.field for field view', () => {
+      const docView: DocView = { view: 'field', name: 'name', parentType: 'User' };
+      expect(component.getBreadcrumbLabel(docView)).toBe('User.name');
+    });
+
+    it('should return @directiveName for directive view', () => {
+      const docView: DocView = { view: 'directive', name: 'deprecated' };
+      expect(component.getBreadcrumbLabel(docView)).toBe('@deprecated');
+    });
+
+    it('should return "Search Results" for search view', () => {
+      const docView: DocView = { view: 'search' };
+      expect(component.getBreadcrumbLabel(docView)).toBe('Search Results');
+    });
+  });
+
+  describe('shouldShowEllipsis', () => {
+    it('should return false when history has 2 or fewer non-root items', () => {
+      component.docHistory.set([
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      expect(component.shouldShowEllipsis()).toBe(false);
+    });
+
+    it('should return true when history has more than 2 non-root items', () => {
+      component.docHistory.set([
+        { view: 'type', name: 'Query' },
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      expect(component.shouldShowEllipsis()).toBe(true);
+    });
+
+    it('should ignore root views in the count', () => {
+      component.docHistory.set([
+        { view: 'root' },
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      expect(component.shouldShowEllipsis()).toBe(false);
+    });
+  });
+
+  describe('getVisibleBreadcrumbs', () => {
+    it('should return all items when there are 2 or fewer', () => {
+      component.docHistory.set([
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      const visible = component.getVisibleBreadcrumbs();
+      expect(visible.length).toBe(2);
+      expect((visible[0]?.view as any).name).toBe('User');
+      expect((visible[1]?.view as any).name).toBe('name');
+    });
+
+    it('should return last 2 items when there are more than 2', () => {
+      component.docHistory.set([
+        { view: 'type', name: 'Query' },
+        { view: 'type', name: 'Organization' },
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      const visible = component.getVisibleBreadcrumbs();
+      expect(visible.length).toBe(2);
+      expect((visible[0]?.view as any).name).toBe('User');
+      expect((visible[1]?.view as any).name).toBe('name');
+    });
+
+    it('should return items with correct original indices', () => {
+      component.docHistory.set([
+        { view: 'type', name: 'Query' },
+        { view: 'type', name: 'Organization' },
+        { view: 'type', name: 'User' },
+      ]);
+      const visible = component.getVisibleBreadcrumbs();
+      expect(visible.length).toBe(2);
+      expect(visible[0]?.index).toBe(1); // Organization at index 1
+      expect(visible[1]?.index).toBe(2); // User at index 2
+    });
+
+    it('should filter out root views', () => {
+      component.docHistory.set([
+        { view: 'root' },
+        { view: 'type', name: 'User' },
+        { view: 'field', name: 'name', parentType: 'User' },
+      ]);
+      const visible = component.getVisibleBreadcrumbs();
+      expect(visible.length).toBe(2);
+      expect((visible[0]?.view as any).view).toBe('type');
+      expect((visible[1]?.view as any).view).toBe('field');
+    });
+  });
   describe('search filter methods', () => {
     it('should initialize with all filters active', () => {
       const filters = component.searchFilters();
@@ -77,11 +230,11 @@ describe('DocViewerComponent', () => {
     it('should handle multiple filter toggles independently', () => {
       component.toggleSearchFilter('types');
       component.toggleSearchFilter('fields');
-      
+
       expect(component.isSearchFilterActive('types')).toBe(false);
       expect(component.isSearchFilterActive('fields')).toBe(false);
       expect(component.isSearchFilterActive('queries')).toBe(true);
       expect(component.isSearchFilterActive('mutations')).toBe(true);
     });
   });
-});
+});

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts

@@ -331,6 +331,83 @@ export class DocViewerComponent {
     }
   }
 
+  /**
+   * Navigate to a specific point in history
+   * @param index The index in history to navigate to
+   */
+  navigateToBreadcrumb(index: number) {
+    if (index === -1) {
+      // Navigate to home
+      this.goHome();
+      return;
+    }
+
+    const history = this.docHistory();
+    if (index >= 0 && index < history.length) {
+      // Get the view at the specified index
+      const targetView = history[index];
+      // Update history to only include items up to this point
+      this.docHistory.set(history.slice(0, index));
+      // Navigate to the target view
+      this.setDocView(targetView);
+    }
+  }
+
+  /**
+   * Get a readable label for a doc view for breadcrumb display
+   * @param docView The doc view to get label for
+   */
+  getBreadcrumbLabel(docView: DocView): string {
+    switch (docView.view) {
+      case 'root':
+        return 'Home';
+      case 'type':
+        return docView.name;
+      case 'field':
+        return `${docView.parentType}.${docView.name}`;
+      case 'directive':
+        return `@${docView.name}`;
+      case 'search':
+        return 'Search Results';
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Determine if ellipsis should be shown in breadcrumbs
+   * Show ellipsis when there are more than 2 items in history (excluding root views)
+   */
+  shouldShowEllipsis(): boolean {
+    const history = this.docHistory();
+    const nonRootHistory = history.filter(item => item.view !== 'root');
+    return nonRootHistory.length > 2;
+  }
+
+  /**
+   * Get the visible breadcrumb items (last 2 before current)
+   * Returns items with their original indices for navigation
+   */
+  getVisibleBreadcrumbs(): Array<{ view: DocView; index: number }> {
+    const history = this.docHistory();
+    const nonRootHistory: Array<{ view: DocView; index: number }> = [];
+    
+    // Build array with original indices
+    history.forEach((item, index) => {
+      if (item.view !== 'root') {
+        nonRootHistory.push({ view: item, index });
+      }
+    });
+
+    // If 2 or fewer items, show all
+    if (nonRootHistory.length <= 2) {
+      return nonRootHistory;
+    }
+
+    // Otherwise, show last 2
+    return nonRootHistory.slice(-2);
+  }
+
   toggleSearchFilter(filter: DocSearchFilterKey) {
     const filters = new Set(this.searchFilters());
     if (filters.has(filter)) {