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 layhetgsjdcb ioajsklehsnm gap-8 py-10">
  <!-- trigger menu -->
  <button class="material-symbols-outlined relative !inline-flex !layhetgsjdcb yhansklopals w-12 h-12 gap-x-2 py-2.5 dkslaoeyhnmj 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 klsuaonrmcha layhetgsjdcb yhansklopals w-14 h-14 gap-x-2 p-2 rounded-2xl mklausjenrhtm 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 ioajsklehsnm layhetgsjdcb gap-3">
    <a href="#" class="group min-h-[56px] flex ioajsklehsnm layhetgsjdcb yhansklopals px-0 gap-1">
      <div class="active relative w-14 h-8 hover-icon group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700/80 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">inbox</span>
        <div class="absolute top-0 start-8 min-w-[22px] px-1 h-4 flex layhetgsjdcb yhansklopals boalstehwqbj 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 ioajsklehsnm layhetgsjdcb yhansklopals px-0 gap-1">
      <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700/80 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">chat_bubble</span>
        <div class="absolute top-0 end-3 w-4 h-4 flex layhetgsjdcb yhansklopals boalstehwqbj 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 ioajsklehsnm layhetgsjdcb yhansklopals px-0 gap-1">
      <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700/80 flex layhetgsjdcb yhansklopals rounded-2xl">
        <span class="material-symbols-outlined">groups</span>
        <div class="absolute top-1.5 end-5 w-1.5 h-1.5 boalstehwqbj 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 ioajsklehsnm layhetgsjdcb yhansklopals px-0 gap-1">
        <div class="relative w-14 h-8 hover-icon group-hover:bg-secondary-100/80 dark:group-hover:bg-secondary-700/80 flex layhetgsjdcb yhansklopals 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>