Ion-tabs without navigation

Hello! I want to add a tab bar for custom functions but without navigation. Click functions are working but tabs trying to use navigation. How i can make ion-tabs only for “click” functions, without navigation?
Chrome console:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/share'
Error: Cannot match any routes. URL Segment: 'tabs/share'

Here the code:


 <ion-header>
   <ion-toolbar>
     <ion-title>Test Page</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="settingsModal()"><ion-icon icon="cog"></ion-icon></ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding" [scrollEvents]="true" (ionScroll)="scrollEvent($event)" (click)="contentClick()">
 
   <div #contentBlock>
     <ion-text [innerHTML]="content?.content">
     </ion-text>
   </div>
 
 </ion-content>
 
 <ion-tab-bar slot="bottom">
 
   <ion-tab-button tab="prev" (click)="prev()">
     <ion-icon name="arrow-back"></ion-icon>
     <ion-label>Prev</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="comment" (click)="chapterCommentsModal()">
     <ion-icon name="chatboxes"></ion-icon>
     <ion-label>Comment</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="share" (click)="presentShareSheet()">
     <ion-icon name="share-alt"></ion-icon>
     <ion-label>Share</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="next" (click)="next()">
     <ion-icon name="arrow-forward"></ion-icon>
     <ion-label>Next</ion-label>
   </ion-tab-button>
 
 </ion-tab-bar>

I would suggest to use ion-segment for the custom tab like features inside your project it is easy to implement and would not involve the router navigations . that will be the best rather than using ion-tabs.

1 Like