Dropdown

Opens a menu of actions or navigational items.

Dropdown web component

Opens a menu of actions or navigational items.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Default

Provide structured action items.

Item 1

Item 2

Item 3

Item 4

Item 5

<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.

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

Large items

Use larger rows for prominent action menus.

Item 1

Item 2

Item 3

Item 4

Item 5

<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.

Item 1

<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.

Item 1

<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.

Item 1

<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.

Item 1

<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.

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Option 9

Option 10

Option 11

Option 12

Option 13

Option 14

Option 15

Option 16

Option 17

Option 18

Option 19

Option 20

<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.

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

<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>

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`	json	`[]`	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

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

Styling parts

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

Behavior

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