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.


I got it working by using base Web components from @ionic/core

Posting it here, because I found this post on Google, and the only answer did not satisfy me.

// Import web components
import { IonTabButton as IonTabButtonHtml } from "@ionic/core/components/ion-tab-button";
import { IonTabBar as IonTabBarHtml } from "@ionic/core/components/ion-tab-bar";

// Add to JSX.IntrinsicElements
declare global {
    namespace JSX {
        interface IntrinsicElements {
            "ion-tab-bar": React.HTMLProps<IonTabBarHtml>;
            "ion-tab-button": React.HTMLProps<IonTabButtonHtml>;

// Render
    <ion-tab-button disabled={!canUndo} onClick={undo}>
        <FontAwesomeIcon icon={["fas", "undo"]} />
    <ion-tab-button onClick={onClearClick}>
        <FontAwesomeIcon icon={["fas", "eraser"]} />

1 Like