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

Dropdown

المان Dropdown یک آیتم منوی nestable است: یک toggle (لینک/متن + دکمه آیکون اختیاری) با یک پنل dropdown (ساختار داخلی پیش‌فرض: یک Div با تگ ul و کلاس brx-dropdown-content حاوی لینک‌ها). از آن داخل Nav (Nestable) یا ساختارهای مشابه استفاده کنید.

تگ HTML پیش‌فرض برای root آن li است. اسکریپت bricksSubmenuPosition موقعیت‌یابی را مدیریت می‌کند.

سطح بالا (Top-level)

  • HTML tag (text) — تگ root؛ در سازنده اعتبارسنجی می‌شود. Placeholder: li.

  • Text (text) — برچسب trigger. پیش‌فرض: «Dropdown».

  • Link to (link) — لینک اختیاری دور متن (فیلدهای lightbox مستثنی).

  • Attribute: aria-label (text) — روی دکمه toggle وقتی آیکون وجود دارد اعمال می‌شود. Placeholder: «Toggle dropdown».

آیکون (Icon)

  • Icon (icon) — اگر تنظیم شود، در دکمه toggle کنار متن نمایش داده می‌شود.

  • Icon padding (spacing) — روی .brx-submenu-toggle button.

  • Gap (number with units) — فاصله flex روی .brx-submenu-toggle.

  • Icon position (select) — از flex direction استفاده می‌کند (row-reverse وقتی آیکون در چپ قرار می‌گیرد).

  • Icon size (number with units) — font-size روی دکمه.

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

  • Icon transform، Icon transform (Open) (transform) — حالت پیش‌فرض در مقابل aria-expanded="true".

  • Icon transition (text) — CSS transition روی دکمه.

نشانگر جهت (Caret)

مثلث اختیاری روی root dropdown (وقتی Size تنظیم شود کلاس caret اضافه می‌کند):

  • Size (number with units) — border-width روی > .brx-dropdown-content::before.

  • Color (color) — border-bottom-color (وقتی size برابر 0 نیست).

  • Transform (transform) — تبدیل caret.

  • Position (dimensions) — موقعیت caret.

محتوا (Content)

  • Position: Static (checkbox) — پنل را در document flow نگه می‌دارد (مثلاً داخل Offcanvas). Dropdown های static همیشه با کلیک toggle می‌شوند، نه hover.

  • Toggle on (select) — click، hover یا click or hover. وقتی Static فعال است مخفی می‌شود (فقط click).

  • Min. width (number with units) — روی .brx-dropdown-content.

  • Transition (text)، Transform، Transform (Open) — حرکت پنل (&.open > .brx-dropdown-content برای حالت باز).

  • Background (background)، Border، Box shadow، Typography — استایل پنل روی .brx-dropdown-content.

آیتم (Item)

استایل ردیف برای لینک‌های مستقیم و toggle های زیرمنو داخل پنل:

  • Justify content (justify-content) — تراز افقی.

  • Padding (spacing) — padding هر آیتم.

  • Background (color)، Border (border)، Typography، Transition (text).

فعال (Active)

حالت‌هایی که با aria-current="page" / .aria-current مطابقت دارند:

  • Background، Border، Typography.

منوی Mega

  • Enable (checkbox) — پنل mega با عرض تمام‌صفحه (brx-has-megamenu)؛ به‌طور پیش‌فرض «کل عرض موجود را پوشش می‌دهد».

  • CSS selector (Horizontal) (text) — اختیاری: تراز عرض/موقعیت افقی با node دیگر.

  • CSS selector (Vertical) (text) — اختیاری: مرجع تراز عمودی.

چندسطحی (Multilevel)

  • Enable (checkbox) — یک سطح زیرمنو در یک زمان نشان می‌دهد؛ با کلیک toggle می‌شود؛ dropdown های داخلی رفتار multilevel را به ارث می‌برند.

  • Back: Text (text) — برچسب کنترل بازگشت (پیش‌فرض «Back»).

  • Back: Typography، Back: Background — استایل .brx-multilevel-back.

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

برای JSON schema کامل به Dropdown Schema مراجعه کنید.