Dropdown - Tuist — ContextQMD

Opens a menu of actions or navigational items.

html

<noora-dropdown label="Dropdown">
  <noora-dropdown-item value="1">Item 1</noora-dropdown-item>
</noora-dropdown>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	`string`	`""`	Sets the trigger label.
`size`	`medium`, `large`	`"large"`	Controls the trigger dimensions.
`secondary-text`	`string`	None	Adds text before the main label.
`icon-only`	`boolean`	`false`	Uses the icon slot as the complete trigger.
`hint`	`string`	None	Adds supporting text.
`disabled`	`boolean`	`false`	Disables the trigger.
`open`	`boolean`	`false`	Controls whether the menu is open.
`close-on-select`	`boolean`	`true`	Closes the menu after selection.
`keep-open`	`boolean`	`false`	Keeps the menu open after selection.

Properties

Property	Type or allowed values	Default	Description
`items`	`Array<Record<string, unknown>>`	`[]`	Defines menu items programmatically when declarative noora-dropdown-item children are not used.

Events

Event	Type	Description
`noora-open-change`	`CustomEvent<{ open: boolean }>`	Emitted when the dropdown opens or closes.
`noora-select`	`CustomEvent<{ item: Record<string, unknown>; value: unknown }>`	Emitted when an enabled item is selected.

Slots

Slot	Description
`icon`	The trigger icon.
`search`	Search content above the item list.
`default`	Declarative noora-dropdown-item children.

Styling parts

Part	Description
`trigger`	The menu trigger.
`content`	The menu content.
`items`	The item list.

Selections emit a noora-select event with the selected item.

Default

Provide structured action items.

html

<noora-dropdown label="Dropdown">
  <noora-dropdown-item value="1">Item 1</noora-dropdown-item>
  <noora-dropdown-item value="2" right-icon="chevron_right">Item 2</noora-dropdown-item>
  <noora-dropdown-item value="3" secondary-text="Foo">Item 3</noora-dropdown-item>
  <noora-dropdown-item value="4" icon="category">Item 4</noora-dropdown-item>
  <noora-dropdown-item value="5">Item 5</noora-dropdown-item>
</noora-dropdown>

Disabled

Disable the complete menu when its actions are unavailable.

html

<noora-dropdown label="Dropdown" disabled></noora-dropdown>

Large items

Use larger rows for prominent action menus.

html

<noora-dropdown label="Dropdown with large items">
  <noora-dropdown-item value="1" size="large" icon="category">Item 1</noora-dropdown-item>
  <noora-dropdown-item value="2" size="large" icon="category">Item 2</noora-dropdown-item>
  <noora-dropdown-item value="3" size="large" icon="category" secondary-text="Foo">Item 3</noora-dropdown-item>
  <noora-dropdown-item value="4" size="large" icon="category">Item 4</noora-dropdown-item>
  <noora-dropdown-item value="5" size="large" icon="category">Item 5</noora-dropdown-item>
</noora-dropdown>

Trigger icon

Add an icon to the dropdown trigger.

html

<noora-dropdown label="Dropdown">
  <noora-icon slot="icon" name="category"></noora-icon>
  <noora-dropdown-item value="1">Item 1</noora-dropdown-item>
</noora-dropdown>

Secondary text

Add concise context beside an item label.

html

<noora-dropdown label="Date" secondary-text="Order by">
  <noora-dropdown-item value="1" secondary-text="Foo">Item 1</noora-dropdown-item>
</noora-dropdown>

Icons and secondary text

Combine visual cues with supporting text.

html

<noora-dropdown label="Date" secondary-text="Order by">
  <noora-icon slot="icon" name="category"></noora-icon>
  <noora-dropdown-item value="1" secondary-text="Foo">Item 1</noora-dropdown-item>
</noora-dropdown>

Hint

Explain the purpose of the menu below its trigger.

html

<noora-dropdown label="Dropdown" hint="This is a hint">
  <noora-dropdown-item value="1">Item 1</noora-dropdown-item>
</noora-dropdown>

Many options

Allow the menu content to scroll when it contains many choices.

html

<noora-dropdown label="Many Options">
  <noora-dropdown-item value="1">Option 1</noora-dropdown-item>
  <noora-dropdown-item value="2">Option 2</noora-dropdown-item>
  <noora-dropdown-item value="3">Option 3</noora-dropdown-item>
  <noora-dropdown-item value="4">Option 4</noora-dropdown-item>
  <noora-dropdown-item value="5">Option 5</noora-dropdown-item>
  <noora-dropdown-item value="6">Option 6</noora-dropdown-item>
  <noora-dropdown-item value="7">Option 7</noora-dropdown-item>
  <noora-dropdown-item value="8">Option 8</noora-dropdown-item>
  <noora-dropdown-item value="9">Option 9</noora-dropdown-item>
  <noora-dropdown-item value="10">Option 10</noora-dropdown-item>
  <noora-dropdown-item value="11">Option 11</noora-dropdown-item>
  <noora-dropdown-item value="12">Option 12</noora-dropdown-item>
  <noora-dropdown-item value="13">Option 13</noora-dropdown-item>
  <noora-dropdown-item value="14">Option 14</noora-dropdown-item>
  <noora-dropdown-item value="15">Option 15</noora-dropdown-item>
  <noora-dropdown-item value="16">Option 16</noora-dropdown-item>
  <noora-dropdown-item value="17">Option 17</noora-dropdown-item>
  <noora-dropdown-item value="18">Option 18</noora-dropdown-item>
  <noora-dropdown-item value="19">Option 19</noora-dropdown-item>
  <noora-dropdown-item value="20">Option 20</noora-dropdown-item>
</noora-dropdown>

Checkbox items

Communicate selected items with checkbox indicators.

html

<noora-dropdown label="Select days" keep-open>
  <noora-dropdown-item value="monday" checkable checked>Monday</noora-dropdown-item>
  <noora-dropdown-item value="tuesday" checkable checked>Tuesday</noora-dropdown-item>
  <noora-dropdown-item value="wednesday" checkable>Wednesday</noora-dropdown-item>
  <noora-dropdown-item value="thursday" checkable>Thursday</noora-dropdown-item>
  <noora-dropdown-item value="friday" checkable checked>Friday</noora-dropdown-item>
  <noora-dropdown-item value="saturday" checkable>Saturday</noora-dropdown-item>
  <noora-dropdown-item value="sunday" checkable>Sunday</noora-dropdown-item>
</noora-dropdown>