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

المكوّنات · شريط جانبي قابل للطيّ

شريط جانبي قابل للطيّ

يطوي نفسه إلى شريط أيقونات، ويتذكّر اختيارك

13 تصاميم من هذه العائلة
شريط جانبي قابل للطيّشريط جانبي بشارات حيّةشريط جانبي بلوحة أوامردرج جانبي للجوّالشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بملفّ المستخدمشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط مزدوج بلوحة سياقيةشريط جانبي بمبدّل مساحات
متوسّط
<div class="sb sbc">
  <nav aria-label="التنقّل الرئيسي">
    <div class="sb-head">
      <button class="tgl" aria-expanded="true" aria-label="طيّ الشريط">☰</button>
      <b data-ar="شركة الأفق" data-en="Ufuq Co.">شركة الأفق</b>
    </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="Dashboard">لوحة المعلومات</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◔</span>
        <span class="lbl" data-ar="الموظفون" data-en="Employees">الموظفون</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">▦</span>
        <span class="lbl" data-ar="الأقسام" data-en="Departments">الأقسام</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◫</span>
        <span class="lbl" data-ar="الرواتب" data-en="Payroll">الرواتب</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◷</span>
        <span class="lbl" data-ar="الحضور" data-en="Attendance">الحضور</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 class="body">
      <h4 data-ar="الموارد البشرية" data-en="HR">الموارد البشرية</h4>
      <p data-ar="اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم." data-en="Click any item to activate it. Arrow keys navigate.">اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم.</p>
    </div>
</div>
← شريط جانبي بشارات حيّةشريط جانبي بلوحة أوامر →