Navigation rail

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

inbox
12

Inbox
chat_bubble
1

Chat
groups

Rooms
star

For You

Overview

The rail is a side navigation component that displays three to seven app destinations and, optionally, a floating action button (FAB). Each destination is represented by an icon and label text.

The rail can serve as the sole navigation component on larger screen sizes, such as desktops and tablets.

When your product is used on small screens, the navigation rail should be swapped for a navigation bar. When your product is used on desktop screens, the navigation rail can be swapped for a navigation drawer.

              
<!-- navigation rail -->
<div class="w-20 h-screen bg-surface-100 dark:bg-surfacedark-100 flex items-center flex-col gap-8 py-10">
  <!-- trigger menu -->
  <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">menu
  </button>

   <!-- fabs -->
  <button class="fabs relative flex flex-row items-center justify-center w-14 h-14 gap-x-2 p-2 rounded-2xl overflow-hidden shadow-lg text-sm tracking-[.00714em] font-medium bg-primary-100 dark:bg-primary-700 dark:text-primary-100">
    <span class="material-symbols-outlined">edit</span>
  </button>
  
  <!-- list menu -->
  <div class="flex flex-col items-center gap-3">
    <a href="#" class="group min-h-[56px] flex flex-col items-center justify-center px-0 gap-1">
      <div class="active relative w-14 h-8 hover-icon group-hover:bg-secondary-100 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 dark:group-hover:bg-opacity-80 flex items-center justify-center rounded-2xl">
        <span class="material-symbols-outlined">inbox</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">12</div>
      </div>
      <p class="text-xs text-neutral-900 dark:text-neutral-100 tracking-[.0416em] leading-tight">Inbox</p>
    </a>

    <a href="#" class="group min-h-[56px] flex flex-col items-center justify-center px-0 gap-1">
      <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 dark: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 tracking-[.0416em] leading-tight">Chat</p>
    </a>

    <a href="#" class="group min-h-[56px] flex flex-col items-center justify-center px-0 gap-1">
      <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 dark: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 tracking-[.0416em] leading-tight">Rooms</p>
    </a>

    <a href="#" class="group min-h-[56px] flex w-32 flex-col items-center justify-center px-0 gap-1">
        <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100 dark:group-hover:bg-secondary-700 group-hover:bg-opacity-80 dark: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 tracking-[.0416em] leading-tight">For You</p>
      </a>
  </div>
</div>