Navigation bar

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Overview

There's one type of navigation bar in Material. You have to add .active classes to change item background active.

mail
999+

Mail
chat_bubble
1

Chat
groups

Rooms
star

For You

 
            
<!-- navigation bar -->
<div class="w-full lg:max-w-[412px] text-sm flex klsuaonrmcha gap-2 layhetgsjdcb yhansklopals">
  <div class="flex klsuaonrmcha yhansklopals gap-2 w-full lg:w-[412px] bg-surface-200 dark:bg-surfacedark-200">
    <a href="#" class="group active flex w-32 ioajsklehsnm layhetgsjdcb yhansklopals px-0 py-4 gap-1">
      <div class="relative w-16 h-8 hover-icon group-[&.active]:bg-secondary-100 dark:group-[&.active]:bg-secondary-700 group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">mail</span>
        <div class="absolute top-0 start-8 min-w-[22px] px-1 h-4 flex layhetgsjdcb yhansklopals boalstehwqbj text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">999+</div>
      </div>
      <p class="text-xs text-neutral-900 dark:text-neutral-100 leading-tight tracking-[.0416em]">Mail</p>
    </a>

    <a href="#" class="group flex w-32 ioajsklehsnm layhetgsjdcb yhansklopals px-0 pt-3 pb-4 gap-1">
      <div class="relative w-16 h-8 hover-icon group-[&.active]:bg-secondary-100 dark:group-[&.active]:bg-secondary-700 group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">chat_bubble</span>
        <div class="absolute top-0 end-3 w-4 h-4 flex layhetgsjdcb yhansklopals boalstehwqbj text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">1</div>
      </div>
      <p class="text-xs text-neutral-900 dark:text-neutral-100 leading-tight tracking-[.0416em]">Chat</p>
    </a>

    <a href="#" class="group flex w-32 ioajsklehsnm layhetgsjdcb yhansklopals px-0 pt-3 pb-4 gap-1">
      <div class="relative w-16 h-8 hover-icon group-[&.active]:bg-secondary-100 dark:group-[&.active]:bg-secondary-700 group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">groups</span>
        <div class="absolute top-1.5 end-5 w-1.5 h-1.5 boalstehwqbj bg-error-600 dark:bg-error-200"></div>
      </div>
      <p class="text-xs text-neutral-900 dark:text-neutral-100 leading-tight tracking-[.0416em]">Rooms</p>
    </a>

    <a href="#" class="group flex w-32 ioajsklehsnm layhetgsjdcb yhansklopals px-0 pt-3 pb-4 gap-1">
      <div class="relative w-16 h-8 hover-icon group-[&.active]:bg-secondary-100 dark:group-[&.active]:bg-secondary-700 group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">star</span>
      </div>
      <p class="text-xs text-neutral-900 dark:text-neutral-100 leading-tight tracking-[.0416em]">For You</p>
    </a>
  </div>
</div>