Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/dropdown.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Dropdown
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>
```