docs(tabs): update README to document tabs without content behavior

Co-authored-by: Lipata <[email protected]>

Author: Copilot

projects/igniteui-angular/src/lib/tabs/tabs/README.md

@@ -3,11 +3,11 @@
 ## Description
 _igx-tabs component allows you to add a tabs component with tab items, positioned at the top, and item content in your application. The tabs in Ignite UI for Angular can be composed with the following components and directives:_
 
--  *igx-tab-item* - single content area that holds header and content components
+-  *igx-tab-item* - single content area that holds header and optionally content components
 -  *igx-tab-header* - holds the title and/or icon of the item and you can add them with `igxTabHeaderIcon` and `igxTabHeaderLabel`
--  *igx-tab-content* - represents the wrapper of the content that needs to be displayed
+-  *igx-tab-content* - represents the wrapper of the content that needs to be displayed (optional)
 
-Each item (`igx-tab-item`) contains header (`igx-tab-header`) and content (`igx-tab-content`). When a tab is clicked, the associated content is selected and visualized into a single container. There should always be a selected tab. Only one tab can be selected at a time.
+Each item (`igx-tab-item`) contains a header (`igx-tab-header`) and optionally content (`igx-tab-content`). When a tab is clicked, the associated content is selected and visualized into a single container. If a tab has no content, it can still be selected and used for navigation purposes. There should always be a selected tab. Only one tab can be selected at a time.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs).
 
 ----------
@@ -59,6 +59,33 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
         </igx-tab-item>
     </igx-tabs>
 
+## Tabs without content (Navigation-only)
+
+For navigation purposes, you can create tabs without content:
+
+    <igx-tabs>
+        <igx-tab-item>
+            <igx-tab-header igxRipple>
+                <igx-icon igxTabHeaderIcon>home</igx-icon>
+                <span igxTabHeaderLabel>Home</span>
+            </igx-tab-header>
+        </igx-tab-item>
+        
+        <igx-tab-item [selected]="true">
+            <igx-tab-header igxRipple>
+                <igx-icon igxTabHeaderIcon>info</igx-icon>
+                <span igxTabHeaderLabel>About</span>
+            </igx-tab-header>
+        </igx-tab-item>
+        
+        <igx-tab-item>
+            <igx-tab-header igxRipple>
+                <igx-icon igxTabHeaderIcon>contact_page</igx-icon>
+                <span igxTabHeaderLabel>Contact</span>
+            </igx-tab-header>
+        </igx-tab-item>
+    </igx-tabs>
+
 
 # API Summary 
 

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts

@@ -944,6 +944,47 @@ describe('IgxTabs', () => {
             expect(tabItems[2].selected).toBe(false);
         }));
 
+        it('should fire events when clicking on tabs without content', fakeAsync(() => {
+            // Set up a clean test with the first test group (tab 2 initially selected)
+            fixture = TestBed.createComponent(TabsTabsOnlyModeTest1Component);
+            tabsComp = fixture.componentInstance.tabs;
+            fixture.detectChanges();
+            tabItems = tabsComp.items.toArray();
+            headerElements = tabItems.map(item => item.headerComponent.nativeElement);
+            
+            const indexChangingSpy = spyOn(tabsComp.selectedIndexChanging, 'emit');
+            const indexChangeSpy = spyOn(tabsComp.selectedIndexChange, 'emit');
+            const itemChangeSpy = spyOn(tabsComp.selectedItemChange, 'emit');
+            
+            tick(100);
+            fixture.detectChanges();
+            
+            // Initially Tab 2 should be selected (index 1)
+            expect(tabsComp.selectedIndex).toBe(1);
+            
+            // Click on Tab 1 (which has no content)
+            headerElements[0].dispatchEvent(new Event('click', { bubbles: true }));
+            tick(200);
+            fixture.detectChanges();
+            
+            // Tab should be selected
+            expect(tabsComp.selectedIndex).toBe(0);
+            
+            // Events should have fired
+            expect(indexChangingSpy).toHaveBeenCalledWith({
+                owner: tabsComp,
+                cancel: false,
+                oldIndex: 1,
+                newIndex: 0
+            });
+            expect(indexChangeSpy).toHaveBeenCalledWith(0);
+            expect(itemChangeSpy).toHaveBeenCalledWith({
+                owner: tabsComp,
+                oldItem: tabItems[1],
+                newItem: tabItems[0]
+            });
+        }));
+
     });
 
     describe('Events', () => {