رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

منو و ناوبری

وضعیت: پیش‌نویس

ناوبری

Section titled “ناوبری”
<nav class="hq-nav" aria-label="بخش‌های سایت">
  <ul class="hq-nav__list">
    <li><a class="hq-nav__link" href="#" aria-current="page">خدمات</a></li>
    <li><a class="hq-nav__link" href="#">محصولات</a></li>
    <li><a class="hq-nav__link" href="#">دربارهٔ ما</a></li>
  </ul>
</nav>

منوی بازشو

Section titled “منوی بازشو”
<div class="hq-menu">
  <button class="hq-button hq-button--secondary hq-button--md" type="button" aria-expanded="false" aria-controls="demo-menu" aria-haspopup="true">
    کنش‌ها <svg class="hq-button__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"/></svg>
  </button>
  <ul class="hq-menu__list" id="demo-menu" hidden>
    <li><button class="hq-menu__item" type="button">ویرایش</button></li>
    <li><button class="hq-menu__item" type="button">کپی</button></li>
    <li><hr class="hq-menu__separator" /></li>
    <li><button class="hq-menu__item hq-menu__item--danger" type="button">حذف</button></li>
  </ul>
</div>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • ناوبری: برای رفتن بین صفحه‌ها یا بخش‌های یک سایت یا مستندات. صفحهٔ فعلی با aria-current="page" مشخص می‌شود.
  • منوی بازشو: برای جمع‌کردن سه کنش یا بیشتر پشت یک دکمه، وقتی جا کم است.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • منوی بازشو برای کنش اصلی صفحه نیست؛ کنش اصلی دکمهٔ مستقل است.
  • ناوبری برای جابه‌جایی بین پنل‌های یک صفحه نیست؛ از زبانه استفاده کنید.
  • بیش از ۷ مورد هم‌سطح در یک ناوبری؛ گروه‌بندی کنید.

گونه‌ها

Section titled “گونه‌ها”
گونه کلاس کاربرد
افقی hq-nav سربرگ سایت
عمودی hq-nav hq-nav--vertical کنار صفحه، مثل فهرست مستندات
منوی بازشو hq-menu کنش‌های یک مورد

ناوبری عمودی

Section titled “ناوبری عمودی”
<nav class="hq-nav hq-nav--vertical" aria-label="مستندات" style="inline-size:16rem">
  <ul class="hq-nav__list">
    <li><a class="hq-nav__link" href="#">شروع</a></li>
    <li><a class="hq-nav__link" href="#" aria-current="page">پایه‌ها</a></li>
    <li><a class="hq-nav__link" href="#">کامپوننت‌ها</a></li>
    <li><a class="hq-nav__link" href="#">الگوها</a></li>
  </ul>
</nav>
انجام بدهاسم‌های کوتاه و صفحهٔ فعلی مشخص.
انجام ندههیچ نشانی از صفحهٔ فعلی نباشد.