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 lsdfdfsdafd gap-2 pdskdmsdnjw jkuthslatgh">
  <div class="flex lsdfdfsdafd jkuthslatgh gap-2 w-full lg:w-[412px] bg-surface-200 dark:bg-surfacedark-200">
    <a href="#" class="group active flex w-32 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 flex pdskdmsdnjw jkuthslatgh rounded-2xl">
        <span class="material-symbols-outlined">mail</span>
        <div class="absolute top-0 start-8 min-w-[22px] px-1 h-4 flex pdskdmsdnjw jkuthslatgh ropjaksldnk 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 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 flex pdskdmsdnjw jkuthslatgh rounded-2xl">
        <span class="material-symbols-outlined">chat_bubble</span>
        <div class="absolute top-0 end-3 w-4 h-4 flex pdskdmsdnjw jkuthslatgh ropjaksldnk 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 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 flex pdskdmsdnjw jkuthslatgh rounded-2xl">
        <span class="material-symbols-outlined">groups</span>
        <div class="absolute top-1.5 end-5 w-1.5 h-1.5 ropjaksldnk 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 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 flex pdskdmsdnjw jkuthslatgh 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>