# Ionic 7 Swipe Tabs With Vanilla JS

**URL:** <https://forum.ionicframework.com/t/ionic-7-swipe-tabs-with-vanilla-js/250677>\
**Category:** Ionic Framework\
**Created:** [February 24, 2026, 5:58pm UTC](https://forum.ionicframework.com/t/ionic-7-swipe-tabs-with-vanilla-js/250677 "2026-02-24T17:58:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![royCodesfrontend](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@royCodesfrontend](https://forum.ionicframework.com/u/royCodesfrontend)\
**Post date:** [February 24, 2026, 5:58pm UTC](https://forum.ionicframework.com/t/ionic-7-swipe-tabs-with-vanilla-js/250677/1 "2026-02-24T17:58:20Z")

</div>

Hi,

I’m using Ionic 7 (vanilla, no Angular/React router) and want to implement swipeable tabs — where swiping changes the tab content and clicking a tab moves to the corresponding slide.

I don’t need routing, just slide + tab sync with `ion-tab-bar`.

Older solutions use `ion-slide-box` (Ionic 1), which doesn’t work in Ionic 7.

What’s the recommended modern approach for this in Ionic 7? Should I use Swiper directly or is there an official pattern?

Thanks!

**Code Below**

```auto
 <ion-tabs>
              <ion-tab tab="Home">
                  <div id="home-page" class="ion-page">
                  <ion-content>
                  <home-page></home-page>
                  </ion-content>
                  </div>
              </ion-tab>
                 <ion-tab tab="Account">
                  <div id="account-page" class="ion-page">
                  <ion-content>
                  <accounts-page></accounts-page>
                  </ion-content>
                  </div>
              </ion-tab>
                 <ion-tab tab="Settings">
                  <div id="test-page" class="ion-page">
                  <ion-content>
                  <settings-page></settings-page>
                  </ion-content>
                  </div>
              </ion-tab>

          <ion-tab-bar slot="bottom">
          <ion-tab-button tab="Home">
          <ion-icon name="home"></ion-icon>
           Home
          
          </ion-tab-button>
         <ion-tab-button tab="Account">
          <ion-icon name="person-circle-sharp"></ion-icon>
          Account
          </ion-tab-button>
           <ion-tab-button tab="Settings">
          <ion-icon name="Settings"></ion-icon>
          Settings
          </ion-tab-button>
          </ion-tab-bar>

        </ion-tabs>

```

---

<div class="post-metadata">

**Author:** ![Hills90210](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@Hills90210](https://forum.ionicframework.com/u/Hills90210)\
**Post date:** [February 24, 2026, 7:18pm UTC](https://forum.ionicframework.com/t/ionic-7-swipe-tabs-with-vanilla-js/250677/2 "2026-02-24T19:18:53Z")

</div>

use ion-segment and style it like a tab bar: [ion-segment: API Documentation for Segmented Controls](https://ionicframework.com/docs/api/segment)

---

<div class="post-metadata">

**Author:** ![royCodesfrontend](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@royCodesfrontend](https://forum.ionicframework.com/u/royCodesfrontend)\
**Post date:** [March 3, 2026, 7:08am UTC](https://forum.ionicframework.com/t/ionic-7-swipe-tabs-with-vanilla-js/250677/3 "2026-03-03T07:08:43Z")

</div>

Hi, thanks for the response will check this out!