I am trying to implement a mobile style bottom navigation bar. For that, I've used mat-toolbar and fixed it at the bottom using css as follows:

ponent.html:

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

ponent.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Here is the rendering :

and i used css :hover to highlight the icons when user hovers over them, like so:

.material-icons.color_blue:hover { 
  color: blueviolet;
}

The rendering :

What I want to achieve:

1. when i click/hover over an icon it should highlight [I do achieve this by the above code] but, it shouldn't dehighlight when clicked/hovered over any other place except other icons in the toolbar.

2. I want some text to be displayed below the icons like so:

I tried using <span> and positioning the text using css but it looks weird and not properly aligned. Also, is using css the only way to do the above things? I am open to any other way. Maybe a UI library that has a similar ponent?

A similar rendering of what i want to achieve:

I am trying to implement a mobile style bottom navigation bar. For that, I've used mat-toolbar and fixed it at the bottom using css as follows:

ponent.html:

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

ponent.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Here is the rendering :

and i used css :hover to highlight the icons when user hovers over them, like so:

.material-icons.color_blue:hover { 
  color: blueviolet;
}

The rendering :

What I want to achieve:

1. when i click/hover over an icon it should highlight [I do achieve this by the above code] but, it shouldn't dehighlight when clicked/hovered over any other place except other icons in the toolbar.

2. I want some text to be displayed below the icons like so:

I tried using <span> and positioning the text using css but it looks weird and not properly aligned. Also, is using css the only way to do the above things? I am open to any other way. Maybe a UI library that has a similar ponent?

A similar rendering of what i want to achieve:

• javascript
• html
• css
• angular
• angular-material

3 Answers 3

Just adding an example in stackblitz that should be a good start for something like this.

I'm not 100% sure what you wanted with the 1st point, but I think you want the active button to have a color to denote that. To do this I used Abhishek's suggestion to use RouterLink and RouterLinkActive. By adding routerLinkActive="active-link" this means that the class is added to that element when the path would match and it can be styled accordingly.

For the text under the icon I just had it always displayed unlike the example provided but you could fiddle with that if you wanted it to only display when active. This is done by making the button be a flex container with a flex direction of column.

https://stackblitz./edit/angular-9-material-starter-par7le?file=src/app/app.ponent.html

.toolbarNav {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  padding: 2em;
  background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
  box-shadow: 2px 2px 4px 5px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

  button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    span {
      display: block;
    }
  }
}

button:hover,
.active-link {
  color: blueviolet;
}

<mat-toolbar class="toolbarNav">
  <button mat-flat-button routerLink="/top-artists" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">
      star_border</mat-icon>
    <span>Top Artists</span>
  </button>
  <button mat-flat-button routerLink="/top-tracks" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">favorite_border
    </mat-icon>
    <span>Top Tracks</span>
  </button>
  <button mat-flat-button routerLink="/history" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">history</mat-icon>
    <span>History</span>
  </button>
</mat-toolbar>

Instead of calling function to navigate between the routes using routerlink for navigation and routerlinkActive to check the activated route and write the css accordingly

You can use events detection and a bit of js. This is a super simple example of the concept:

const icons = document.getElementsByClassName('iconX')
const clearIcons = () =>{
  for (const icon of icons) {
    icon.classList.remove('active')
  }
}
for (const icon of icons) {
  icon.addEventListener('mouseenter', (event)=>{
     clearIcons();
     event.target.classList.add('active')
  })
}

.iconX{
    width: fit-content;
}
.iconX.active{
    color: red;
}

<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>

<div class="other content">This is different content , not a tab icon</div>

<button class="non important button">If you click me, you don´t loose the active status of your tabs</div>