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 pdskdmsdnjw oskasdadiaa gap-8 py-10">
  <!-- trigger menu -->
  <button class="material-symbols-outlined relative !inline-flex !pdskdmsdnjw jkuthslatgh 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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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 oskasdadiaa pdskdmsdnjw opsiajksman">
    <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh 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 pdskdmsdnjw jkuthslatgh rounded-2xl">
        <span class="material-symbols-outlined">inbox</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">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 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 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 tracking-[.0416em] leading-tight">Chat</p>
    </a>

    <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh 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 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 tracking-[.0416em] leading-tight">Rooms</p>
    </a>

    <a href="#" class="group min-h-[56px] flex w-32 oskasdadiaa pdskdmsdnjw jkuthslatgh 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 pdskdmsdnjw jkuthslatgh 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>