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 flex-row space-x-2 items-center justify-center">
  <div class="flex flex-row justify-center gap-2 w-full lg:w-[412px] bg-surface-200 dark:bg-surfacedark-200">
    <a href="#" class="group active flex w-32 flex-col items-center justify-center 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 items-center justify-center rounded-2xl">
        <span class="material-symbols-outlined">mail</span>
        <div class="absolute top-0 left-8 min-w-[22px] px-1 h-4 flex items-center justify-center rounded-full 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 flex-col items-center justify-center 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 items-center justify-center rounded-2xl">
        <span class="material-symbols-outlined">chat_bubble</span>
        <div class="absolute top-0 right-3 w-4 h-4 flex items-center justify-center rounded-full 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 flex-col items-center justify-center 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 items-center justify-center rounded-2xl">
        <span class="material-symbols-outlined">groups</span>
        <div class="absolute top-1.5 right-5 w-1.5 h-1.5 rounded-full 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 flex-col items-center justify-center 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 items-center justify-center 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>