Skip to content
Bricks Academy
Get Bricks

Dropdown

The Dropdown element is a nestable menu item: a toggle (link/text + optional icon button) with a dropdown panel (default inner structure is a Div with tag ul and class brx-dropdown-content containing links). Use it inside Nav (Nestable) or similar structures.

Default HTML tag for the root is li. The script bricksSubmenuPosition handles positioning.

Top-level

Section titled “Top-level”

  • HTML tag (text) — Root tag; validated in the builder. Placeholder: li.

  • Text (text) — Label for the trigger. Default: “Dropdown”.

  • Link to (link) — Optional link around the text (lightbox fields excluded).

  • Attribute: aria-label (text) — Applied to the toggle button when an icon is present. Placeholder: “Toggle dropdown”.

Icon

Section titled “Icon”

  • Icon (icon) — If set, shown in the toggle button next to the text.

  • Icon padding (spacing) — On .brx-submenu-toggle button.

  • Gap (number with units) — Flex gap on .brx-submenu-toggle.

  • Icon position (select) — Uses flex direction (row-reverse when set to place icon on the left).

  • Icon size (number with units) — font-size on the button.

  • Icon color (color).

  • Icon transform, Icon transform (Open) (transform) — Default vs aria-expanded="true".

  • Icon transition (text) — CSS transition on the button.

Caret

Section titled “Caret”

Optional triangle on the dropdown root (adds class caret when Size is set):

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

  • Color (color) — border-bottom-color (when size ≠ 0).

  • Transform (transform).

  • Position (dimensions).

Content

Section titled “Content”

  • Position: Static (checkbox) — Keeps the panel in document flow (e.g. inside Offcanvas). Static dropdowns always toggle on click, not hover.

  • Toggle on (select) — click, hover, or click or hover. Hidden when Static is enabled (click only).

  • Min. width (number with units) — On .brx-dropdown-content.

  • Transition (text), Transform, Transform (Open) — Panel motion (&.open > .brx-dropdown-content for open state).

  • Background (background), Border, Box shadow, Typography — Panel chrome on .brx-dropdown-content.

Item

Section titled “Item”

Row styling for direct links and submenu toggles inside the panel:

  • Justify content (justify-content).

  • Padding (spacing).

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

Active

Section titled “Active”

States matching aria-current="page" / .aria-current:

  • Background, Border, Typography.

Mega menu

Section titled “Mega menu”

  • Enable (checkbox) — Full-width style mega panel (brx-has-megamenu); “covers entire available width” by default.

  • CSS selector (Horizontal) (text) — Optional: align width/horizontal position to another node.

  • CSS selector (Vertical) (text) — Optional: vertical alignment reference.

Multilevel

Section titled “Multilevel”

  • Enable (checkbox) — Shows one submenu level at a time; toggles on click; inner dropdowns inherit multilevel behavior.

  • Back: Text (text) — Back control label (default “Back”).

  • Back: Typography, Back: Background — .brx-multilevel-back styling.