PenTool UIتصفّح المكتبة

المكوّنات · درج جانبي للجوّال

درج جانبي للجوّال

ينزلق من جهة البداية، ويحبس التركيز داخله

13 تصاميم من هذه العائلة
درج جانبي للجوّالشريط جانبي بشارات حيّةشريط جانبي قابل للطيّشريط جانبي بلوحة أوامرشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بملفّ المستخدمشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط مزدوج بلوحة سياقيةشريط جانبي بمبدّل مساحات
متقدّم
<div class="sb sbd">
  <div class="body">
    <button class="opn" aria-expanded="false" aria-controls="dr">☰ <span data-ar="القائمة" data-en="Menu">القائمة</span></button>
    <h4 data-ar="تطبيق توصيل" data-en="Delivery app">تطبيق توصيل</h4>
    <p data-ar="التركيز يبقى داخل الدرج، ويعود لمكانه عند الإغلاق." data-en="Focus stays inside the drawer and returns on close.">التركيز يبقى داخل الدرج، ويعود لمكانه عند الإغلاق.</p>
  </div>
  <div class="scrim" hidden></div>
  <nav id="dr" aria-label="التنقّل الرئيسي" aria-hidden="true">
    <div class="sb-head">
      <b data-ar="سريع" data-en="Saree">سريع</b>
      <button class="cls" aria-label="إغلاق">✕</button></div>
    <ul>
      <li><button class="item" data-nav aria-current="page">
        <span class="ic" aria-hidden="true">◇</span>
        <span class="lbl" data-ar="الرحلات" data-en="Trips">الرحلات</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◆</span>
        <span class="lbl" data-ar="السائقون" data-en="Drivers">السائقون</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◈</span>
        <span class="lbl" data-ar="المناطق" data-en="Zones">المناطق</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◉</span>
        <span class="lbl" data-ar="الشكاوى" data-en="Complaints">الشكاوى</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">⚙</span>
        <span class="lbl" data-ar="الإعدادات" data-en="Settings">الإعدادات</span>
      </button></li>
    </ul>
  </nav>
</div>
← شريط جانبي بلوحة أوامرشريط جانبي بمجموعات →