Styling ion-tabs in Ionic 5
Tags: ionic, angular, css, html
Published: 2020-10-27 17:24:37

---
title: Styling ion-tabs in Ionic 5
published: true
description: 
tags: ionic,angular,css,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zv5zlhcj6e4h3v4fogvd.png
---

A couple of weeks ago I was given a design by a client where the tabs UI was quite different compared to the default appearance of the well-known `ion-tabs`.

When I saw the design my first thought was "oh boy here we go again... another UI challenge that probably will be resolved adding `position:absolute` and a bit of sweet sugar courtesy of the `border-radius` property.

Like some of you should know, `ion-tabs` is one of the most complex components built in Ionic Framework. This web component is smart enough to manage different stack navigation for each tab declared in our template and in our routing module.

The good news is that it's also flexible enough to allow us to customize the appearance with some user-defined styles.

So, after some weird CSS experiments 🌝 the final result ended like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bexk5abm5hhykc9kx4g6.gif)

To get this design, the following markup was used:

```html
<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" layout="icon-top">
      <ion-icon name="search"></ion-icon>
      <ion-label>Explore</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="wishlists" layout="icon-top">
      <ion-icon name="gift"></ion-icon>
      <ion-label>Wishlists</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="groups" layout="icon-top">
      <ion-icon name="people-circle"></ion-icon>
      <ion-label>Groups</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account" layout="icon-top">
      <ion-icon name="person"></ion-icon>
      <ion-label>Account</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
```

Nothing fancy here. This structure will be very familiar if you already have experience working with tabs in Ionic.

The real magic happens in the component styles file.

First, I targeted the `ion-tab-bar` element. Since I only needed it to move it slightly from the bottom, I set the `position` and the `bottom` property to `relative` and `20px`, respectively.

Also, the tabs shouldn't fill the whole width, so I modified the `width` property to `92%` and added `margin: 0 auto` to align the element horizontally. Finally, I also set `border-radius: 16px` to get that nice corners.

The last thing was to add a line indicator right above the selected tab. For our fortune, the `.tab-selected` class is brought automatically by Ionic, so just by using the pseudo-selector `::before` I was able to add the desired indicator.

By default, the line indicator will be transparent for all the `ion-tab-button`, except the one with the `.tab-selected` class.

```scss
ion-tab-bar {
  bottom: 20px;
  position: relative;
  border-radius: 16px;
  width: 92%;
  margin: 0 auto;
}

ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: var(--ion-color-primary);

  &::before {
    background-color: transparent;
    display: block;
    content: "";
    margin: 0 auto;
    width: 20px;
    height: 2px;
  }

  &.tab-selected::before {
    background-color: var(--ion-color-primary);
  }
}
```

Demo:

{% stackblitz ionic-5-custom-ion-tabs view=preview %}