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

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