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

المكوّنات · شريط جانبي بملفّ المستخدم

شريط جانبي بملفّ المستخدم

قائمة منسدلة تُغلق بالضغط خارجها وبمفتاح الهروب

13 تصاميم من هذه العائلة
شريط جانبي بملفّ المستخدمشريط جانبي بشارات حيّةشريط جانبي قابل للطيّشريط جانبي بلوحة أوامردرج جانبي للجوّالشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط مزدوج بلوحة سياقيةشريط جانبي بمبدّل مساحات
متوسّط
<div class="sb sbp">
  <nav aria-label="التنقّل الرئيسي">
    <div class="sb-head"><b data-ar="وكالة مدى" data-en="Mada Agency">وكالة مدى</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="Campaigns">الحملات</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◒</span>
        <span class="lbl" data-ar="المحتوى" data-en="Content">المحتوى</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◓</span>
        <span class="lbl" data-ar="التقارير" data-en="Reports">التقارير</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◉</span>
        <span class="lbl" data-ar="العملاء" data-en="Clients">العملاء</span>
      </button></li>
    </ul>
    <div class="sb-foot">
      <button class="usr" aria-expanded="false" aria-haspopup="menu">
        <span class="av" aria-hidden="true">ر</span>
        <span class="who"><b data-ar="ريم القحطاني" data-en="R. Alqahtani">ريم القحطاني</b>
        <i data-ar="مديرة الحسابات" data-en="Account Director">مديرة الحسابات</i></span>
        <span class="arw" aria-hidden="true">⌃</span></button>
      <ul class="menu" role="menu" hidden>
        <li role="none"><button role="menuitem" data-ar="الملف الشخصي" data-en="Profile">الملف الشخصي</button></li>
        <li role="none"><button role="menuitem" data-ar="تبديل الوكالة" data-en="Switch agency">تبديل الوكالة</button></li>
        <li role="none"><button role="menuitem" class="out" data-ar="تسجيل الخروج" data-en="Sign out">تسجيل الخروج</button></li>
      </ul>
    </div>
  </nav>
    <div class="body">
      <h4 data-ar="وكالة تسويق" data-en="Marketing agency">وكالة تسويق</h4>
      <p data-ar="اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم." data-en="Click any item to activate it. Arrow keys navigate.">اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم.</p>
    </div>
</div>
← شريط جانبي بتثبيت البنودشريط جانبي بمؤشّرات إنجاز →