پرش به محتویات

Nav (Nestable)

المان Nav (Nestable) منوهای ناوبری سلسله‌مراتبی با قابلیت dropdown، پشتیبانی از چندسطحی و رفتار واکنش‌گرا برای موبایل ایجاد می‌کند. از ساختارهای منوی تودرتو پشتیبانی می‌کند و می‌توان از آن برای ساخت سیستم‌های ناوبری پیچیده استفاده کرد.

تنظیمات

تگ HTML و دسترسی‌پذیری

  • HTML tag (text) — تگ HTML برای المان ناوبری. از dynamic data پشتیبانی می‌کند. پیش‌فرض: nav.

  • aria-label (text) — برچسب دسترسی‌پذیری برای ناوبری. از dynamic data پشتیبانی می‌کند. پیش‌فرض: «Menu».

سطح بالا (Item)

  • Gap (number with units) — فاصله بین آیتم‌های ناوبری سطح بالا. خاصیت gap را برای selector .brx-nav-nested-items کنترل می‌کند.

  • Justify content (justify-content) — تراز افقی آیتم‌های سطح بالا. از نسخه 1.10 منسوخ شده؛ به‌جای آن از «Align items» زیر «Mobile menu» استفاده کنید.

  • Padding (spacing) — padding برای آیتم‌های ناوبری سطح بالا. خاصیت padding را برای selector‌های متعددی کنترل می‌کند.

  • Background color (color) — رنگ پس‌زمینه آیتم‌های سطح بالا.

  • Border (border) — استایل border برای آیتم‌های سطح بالا.

  • Typography (typography) — تنظیمات typography برای آیتم‌های سطح بالا.

  • Transform (transform) — تنظیمات transform برای آیتم‌های سطح بالا.

  • Transition (text) — تنظیمات transition برای آیتم‌های سطح بالا. از dynamic data پشتیبانی می‌کند.

حالت فعال (Active State)

  • Background color (color) — رنگ پس‌زمینه برای آیتم‌های فعال/صفحه جاری. برای selector‌های [aria-current="page"] و .brx-submenu-toggle.aria-current اعمال می‌شود.

  • Border (border) — استایل border برای آیتم‌های فعال.

  • Typography (typography) — تنظیمات typography برای آیتم‌های فعال.

توجه: فقط روی المان‌های dropdown سطح بالا اعمال می‌شود.

  • Text padding (spacing) — padding برای متن dropdown. خاصیت padding را برای selector .brx-nav-nested-items > li > .brx-submenu-toggle > span کنترل می‌کند.

  • Icon padding (spacing) — padding برای آیکون‌های dropdown. خاصیت padding را برای selector .brx-nav-nested-items > li > .brx-submenu-toggle button کنترل می‌کند.

  • Gap (number with units) — فاصله بین متن و آیکون در toggle‌های dropdown. خاصیت gap را برای selector .brx-nav-nested-items > li > .brx-submenu-toggle کنترل می‌کند.

متن (Text)

  • Text padding (spacing) — padding برای متن dropdown. خاصیت padding را برای selector .brx-submenu-toggle span کنترل می‌کند (روی همه dropdown‌ها اعمال می‌شود).

آیکون (Icon)

برای تنظیم آیکون به‌صورت جداگانه، dropdown را ویرایش کنید.

  • Icon padding (spacing) — padding برای آیکون‌های dropdown.

  • Gap (number with units) — فاصله بین متن و آیکون در toggle‌های dropdown.

  • Icon position (select) — موقعیت آیکون dropdown. پیش‌فرض: «Right».

  • Icon size (number with units) — اندازه آیکون dropdown.

  • Icon color (color) — رنگ آیکون dropdown.

  • Icon transform (transform) — تنظیمات transform برای آیکون‌های dropdown.

  • Icon transform (Open) (transform) — تنظیمات transform برای آیکون‌های dropdown هنگام باز بودن.

  • Icon transition (text) — تنظیمات transition برای آیکون‌های dropdown. از dynamic data پشتیبانی می‌کند.

محتوا (Content)

ناحیه زیرمنو، mega menu یا multilevel.

  • Min. width (number with units) — حداقل عرض برای محتوای dropdown. خاصیت min-width را برای selector .brx-dropdown-content کنترل می‌کند.

  • Background color (color) — رنگ پس‌زمینه محتوای dropdown.

  • Border (border) — استایل border برای محتوای dropdown.

  • Box shadow (box-shadow) — box shadow برای محتوای dropdown.

  • Typography (typography) — تنظیمات typography برای محتوای dropdown.

  • Transform (transform) — تنظیمات transform برای محتوای dropdown.

  • Transform (Open) (transform) — تنظیمات transform برای محتوای dropdown هنگام باز بودن.

  • Transition (text) — تنظیمات transition برای محتوای dropdown. از dynamic data پشتیبانی می‌کند.

  • Z-index (number) — z-index برای المان‌های dropdown. پیش‌فرض: 1001.

آیتم (Item)

  • Padding (spacing) — padding برای آیتم‌های dropdown.

  • Background (color) — رنگ پس‌زمینه برای آیتم‌های dropdown.

  • Border (border) — استایل border برای آیتم‌های dropdown.

  • Typography (typography) — تنظیمات typography برای آیتم‌های dropdown.

  • Transition (text) — تنظیمات transition برای آیتم‌های dropdown. از dynamic data پشتیبانی می‌کند.

چندسطحی (Multilevel)

فقط dropdown فعال را نمایش دهید. با کلیک toggle کنید. dropdown‌های داخلی multilevel را به ارث می‌برند.

  • Enable (checkbox) — قابلیت dropdown چندسطحی را فعال کنید.

  • Back: Text (text) — متن دکمه برگشت در ناوبری چندسطحی. فقط وقتی multilevel فعال است در دسترس است.

  • Back: Typography (typography) — تنظیمات typography برای دکمه برگشت. فقط وقتی multilevel فعال است در دسترس است.

  • Back: Background (color) — رنگ پس‌زمینه دکمه برگشت. فقط وقتی multilevel فعال است در دسترس است.

منوی موبایل (Mobile Menu)

برای نمایش/مخفی کردن منوی موبایل، المان «Toggle» را بعد از «Nav items» قرار دهید.

  • Keep open while styling (checkbox) — منوی موبایل را هنگام استایل‌دهی در سازنده باز نگه دارید. کلاس brx-open اضافه می‌کند. به‌عنوان تنظیم ذخیره نمی‌شود.

  • Hide at breakpoint / Show at breakpoint (select) — breakpoint برای نمایش/مخفی کردن منوی موبایل. گزینه‌ها شامل همه breakpoint‌ها به‌علاوه «Always» و «Never». پیش‌فرض: «Mobile landscape».

  • Width (number with units) — عرض منوی موبایل.

  • Height (number with units) — ارتفاع منوی موبایل.

  • Padding (Dropdown) (spacing) — padding برای محتوای dropdown در نمای موبایل. برای ایجاد سلسله‌مراتب بصری بین dropdown‌های تودرتو استفاده می‌شود.

  • Align items (align-items) — تراز عمودی آیتم‌های منوی موبایل.

  • Justify content (justify-content) — تراز افقی آیتم‌های منوی موبایل.

  • Position (dimensions) — تنظیمات موقعیت برای منوی موبایل.

  • Background color (color) — رنگ پس‌زمینه منوی موبایل.

آیتم (Item)

  • Align items (align-items) — تراز عمودی آیتم‌های منوی موبایل.

مرجع توسعه‌دهنده

JSON schema کامل: nav-nested Schema