ConsolidateNot Applicable
Dropdown Item Group Component link

The popover surface that opens when a Dropdown is tapped — a stack of Dropdown Items in a rounded card with a drop shadow.

Consolidate into Dropdown composition
Not a reusable DS primitive. Layout is hardcoded (8 rows, last row is a detached frame — not a DropdownItem instance). Native menu infrastructure handles the popover surface on both platforms. Fold into the Dropdown component's expanded state as inline overlay behavior, not a separate component.

The group appears immediately below a Dropdown trigger in the expanded state. On native platforms it is rendered by the OS menu primitive, not drawn manually.

Dropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown Item
Properties
variant(none)
item count8 (fixed)
width366px (fixed)
Reusable
Warn
Layout is hardcoded to 8 Dropdown Items with a fixed 366px width. No item count property, no content slot, no width-fills-container behavior. Consumers cannot reuse this for a 3-item menu or a 12-item menu without manually rebuilding the composition.
Self-contained
Partial
Carries its own bg, radius, and shadow tokens. But the last row is a detached frame named Dropdown - Item (node 6383:3442) instead of a DropdownItem component instance — breaking the self-contained promise.
Consistent
Warn
Seven rows are DropdownItem instances, the eighth is a detached duplicate frame. The component name uses a hyphenated " - " (Dropdown Item - Group) which doesn't match other DS naming ("Avatar Group", "Button Group").
Composable
Fail
Not a composable container. No slot, no items property, no variant axis. Cannot be nested inside Dropdown as an overlay — the Dropdown's Expanded variant draws its own list instead of referencing this group. Effectively a preview artifact, not a component.
State iOS Android Figma Property Notes
Default (open) Yes Yes — White bg, 6px radius, drop shadow. Rendered by Menu (iOS) / DropdownMenu (Android) automatically.
Item hover/press Yes Yes — Handled by the per-item Dropdown Item component, not the group. Touch feedback is platform-native.
Scroll Yes Yes — Native menus clip and scroll automatically when item count exceeds available height.
  • Last row is a detached frame, not a component instance. The eighth row (node 6383:3442, Dropdown - Item) is a hand-built frame with inline styles instead of a DropdownItem instance. Breaks the group's consistency and means any DropdownItem property change will not propagate to the last row. C1 · Layer Structure & Naming
  • No slot, no item count, no width parameter. The group is a fixed layout of 8 rows at 366px. There is no items slot, no numeric count property, and no fill-container option. Consumers cannot build a 3-item menu or a wider menu without rebuilding it. C1 · Layer Structure & Naming
  • Component name uses irregular " - " separator. Dropdown Item - Group doesn't match other DS group naming (Avatar Group, Button Group, List). Consider renaming to Dropdown Menu or folding under Dropdown/Menu. C2 · Variant & Property Naming
  • Popover surface does not exist as a separate native primitive. Both SwiftUI (Menu) and Compose (DropdownMenu) handle the surface — shadow, radius, bg, positioning, clipping — automatically. Modeling it as a standalone Figma component creates a phantom that cannot be Code Connect-mapped 1:1. C4 · Native Mappability
  • Last row has a bottom border. Every row in the group carries border-b including the final row, producing a redundant separator flush with the card's bottom edge. Should be removed on the last item or moved to a top-border-all-except-first pattern. C1 · Layer Structure & Naming
  • Code Connect mappings not registered. If the component is kept, it has no parameters to map. If consolidated into Dropdown, it will not need its own mapping. C7 · Code Connect Linkability
  • Consolidate into the Dropdown component's Expanded state. The popover surface is not independently reusable — it always pairs with a Dropdown trigger. Remove this as a separate DS primitive and express the overlay via Dropdown's type=Expanded variant. Native Menu/DropdownMenu primitives render the surface automatically. Family
  • Alternatively, convert to a Slot-based container. If kept, replace the hardcoded 8 instances with a Figma Slot accepting any number of Dropdown Items. Rename to Dropdown Menu. Set width to fill-container so the parent trigger decides sizing. Slot
  • Replace the detached last row with a DropdownItem instance. Node 6383:3442 is a hand-built frame — swap it for a DropdownItem component instance so property changes propagate uniformly. Composition
  • Remove the bottom border on the last item. Use a ::not(:last-child)-equivalent pattern (separator between rows, not after the final row) to avoid the double line against the card's bottom edge. Property
  • Rename to Dropdown Menu (if kept). "Dropdown Item - Group" reads as a group of items; "Dropdown Menu" matches the native primitive (Menu / DropdownMenu) and reads better in the component picker. Rename
  • Document as an internal artifact, not a shipped component. If the team keeps it purely for Figma layout previews, mark it _internal or move it to a Hidden page so it doesn't appear in the public component picker. Docs
Variants
Default
DES DEV

Rounded card surface containing a vertical stack of Dropdown Items. 6px corner radius, white background, 12px-blur drop shadow at 6px offset.

Dropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown ItemDropdown Item
Properties
Variant Default
Item count 8 (fixed)
Colors
Surface #FFFFFF
Border #E5EBF4
Shadow depth 6/12
Layout
Width 328px
Border radius 6px
Padding 8 vertical
Item count up to 8
Typography
Item style Primary/Label/Light/Small
Item font Proxima Soft Semibold · 14 / 14
Colors by State

Display-only surface. The group itself only contributes bg, shadow, and row dividers — all per-item colors come from Dropdown Item.

Role Token VALUE
Surface bg bg/color-bg-main #FFFFFF
Row divider main/dropdown-item/color/default/border #E5EBF4
Shadow color elevation/app/shadow/color-shadow #020E2229
Shadow border elevation/app/shadow/color-border #FFFFFF00
Item label main/dropdown-item/color/default/label #0A2757
Figma PropertySwiftUICompose
(no properties) Menu / View ZStack DropdownMenu
Width 366px — —
Item count 8 ForEach(items) items.forEach
SwiftUI
ios/Components/Dropdown/EBDropdownMenu.swift
Jetpack Compose
android/components/dropdown/EBDropdownMenu.kt
RequirementiOSAndroid
Menu role Automatic via Menu Automatic via DropdownMenu (Role.DropdownList)
Focus trap VoiceOver moves focus into the menu on open TalkBack moves focus into the menu on open
Dismiss on outside tap Automatic onDismissRequest
Max visible items Native scroll when exceeded Native scroll when exceeded

Do

Render the menu surface through SwiftUI's Menu or Compose's DropdownMenu. Let the platform handle shadow, clipping, positioning, and keyboard dismissal.

Don't

Don't hand-draw a shadowed card and place items inside it. You'll reimplement focus management, scroll clipping, and accessibility semantics that the platform gives you for free.

Do

Keep Dropdown Item as the per-row component. Use it inside the native menu's builder closure (SwiftUI) or inside DropdownMenuItem's text slot (Compose).

Don't

Don't use this Figma component as a layout reference for production — the fixed 8-row, 366px-wide, detached-last-row structure won't match real menu content.

ID Criterion Status Notes
C1 Layer Structure & Naming Requires Rework Fixed 8-item layout with no slot. Last row is a detached frame (6383:3442), not a DropdownItem instance. Component name uses irregular " - " separator.
C2 Variant & Property Naming Needs Refinement No variant properties exist. Component name Dropdown Item - Group is irregular; prefer Dropdown Menu.
C3 Token Coverage Ready All colors, radius, spacing, and shadow values bound to tokens (bg/color-bg-main, elevation/app/shadow/*, space/space-*).
C4 Native Mappability Requires Rework Popover surface is rendered by Menu / DropdownMenu natively. No 1:1 component to map to.
C5 Interaction State Coverage Ready Surface has no interactive states of its own. Per-item states live on Dropdown Item.
C6 Asset & Icon Quality Ready No icons or raster assets. Pure layout + shadow.
C7 Code Connect Linkability Not Applicable No native component to map to. Consolidate into Dropdown instead.
Aspect Status Notes
Property naming Not Applicable No properties exist on the component.
Slot coverage Requires Rework No items slot — blocks any meaningful mapping.
Native component file Not Applicable Handled by Menu/DropdownMenu. No dedicated EB component required.
Recommendation Consolidate Fold into Dropdown's Expanded variant or convert to a slot-based Dropdown Menu before mapping.

Single variant, no property axes.

VariantWidthItem CountNode ID
Default366px8 (7 instances + 1 detached frame)6383:3446
Initial Assessment · node 6383:3446
Component assessed — Single variant, 8-item fixed layout at 366px. Rounded 6px card, white bg, 6px/12px drop shadow. All tokens bound (bg, radius, shadow, space). Documented
Initial
Last row is a detached frame — Node 6383:3442 is a hand-built Dropdown - Item frame instead of a DropdownItem component instance. Breaks consistency. Open
C1 Open
No slot, no item count, no fill-container width — Layout is hardcoded to 8 rows at 366px. Cannot be reused for menus of different sizes. Open
C1 Open
Irregular component name — "Dropdown Item - Group" uses a " - " separator inconsistent with other DS group names. Recommend rename to "Dropdown Menu". Open
C2 Open
Popover surface not a native primitive — Both Menu (iOS) and DropdownMenu (Compose) draw the shadowed card automatically. This component has no 1:1 native mapping. Open
C4 Open
Code Connect not registered — No properties to map. Consolidate into Dropdown before mapping. Open
C7 Open