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

المكوّنات · شريط بحساب وإشعارات

شريط بحساب وإشعارات

قائمتان منفصلتان، فتح إحداهما يغلق الأخرى

12 تصاميم من هذه العائلة
شريط بحساب وإشعاراتشريط بإعلان علويشريط تطبيق مصغّرشريط بمسار تنقّلشريط بشعار متوسّطشريط علوي كلاسيكيشريط بقائمة ضخمةشريط جوّال بقائمة منسدلةشريط ببحث مركزيشريط يتقلّص مع التمريرشريط بتبويبات ثانويةشريط شفّاف يمتلئ
متقدّم
<div class="nb nba">
  <header>
    <span class="brand"><span class="mk">◫</span><span data-ar="مصرف الوفاء" data-en="Wafa Bank">مصرف الوفاء</span></span>
    <nav aria-label="الرئيسية">
      <a href="#" aria-current="page" data-ar="الحسابات" data-en="Accounts">الحسابات</a><a href="#" data-ar="التحويلات" data-en="Transfers">التحويلات</a><a href="#" data-ar="البطاقات" data-en="Cards">البطاقات</a>
    </nav>
    <span class="grow"></span>
    <button class="ic bell" aria-expanded="false" aria-controls="alp" aria-label="الإشعارات">
      🔔<span class="dot">4</span></button>
    <button class="usr" aria-expanded="false" aria-controls="usp" aria-haspopup="menu">
      <span class="av">ع</span><span class="nm" data-ar="عبدالله" data-en="Abdullah">عبدالله</span>⌄</button>
  </header>
  <ul id="alp" class="pop alerts" hidden>
    <li><b data-ar="حوالة واردة" data-en="Incoming transfer">حوالة واردة</b><span class="am"></span></li>
    <li><b data-ar="فاتورة مستحقّة" data-en="Bill due">فاتورة مستحقّة</b><span class="am"></span></li>
    <li><b data-ar="تنبيه أمني" data-en="Security alert">تنبيه أمني</b><span class="tm" data-ar="أمس" data-en="Yesterday">أمس</span></li>
  </ul>
  <ul id="usp" class="pop 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="Settings">الإعدادات</button></li>
    <li role="none"><button role="menuitem" class="out" data-ar="خروج" data-en="Sign out">خروج</button></li>
  </ul>
  <div class="stage">
    <h4 data-ar="حساب وإشعارات" data-en="Account and alerts">حساب وإشعارات</h4>
    <p data-ar="اضغط أي رابط ليصير الحالي. القوائم تُغلق بالهروب وبالضغط خارجها." data-en="Click any link to make it current. Menus close on Escape and outside click.">اضغط أي رابط ليصير الحالي. القوائم تُغلق بالهروب وبالضغط خارجها.</p>
  </div>
</div>
← حقل الهوية والإقامةشريط بإعلان علوي →