# 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts