InlineDropdown

Opens a compact inline menu.

html

<noora-inline-dropdown label="Sort">
  <noora-dropdown-item value="newest">Newest</noora-dropdown-item>
</noora-inline-dropdown>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	`string`	`""`	Sets the trigger label.
`size`	`small`, `large`	`"small"`	Controls the trigger dimensions.
`disabled`	`boolean`	`false`	Disables the trigger.
`open`	`boolean`	`false`	Controls whether the menu is open.
`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.
`default`	Declarative noora-dropdown-item children.

Styling parts

Part	Description
`trigger`	The menu trigger.
`content`	The menu content.

Selections emit a noora-select event.

Default

Use an inline menu for compact choices.

html

<noora-inline-dropdown label="Sort">
  <noora-dropdown-item value="newest">Newest</noora-dropdown-item>
  <noora-dropdown-item value="oldest">Oldest</noora-dropdown-item>
</noora-inline-dropdown>

Disabled

Prevent changes while the choice is unavailable.

html

<noora-inline-dropdown label="Sort" disabled>
  <noora-dropdown-item value="newest">Newest</noora-dropdown-item>
</noora-inline-dropdown>

Large items

Use larger item rows for more prominent menus.

html

<noora-inline-dropdown label="Environment" size="large">
  <noora-dropdown-item value="production" size="large">Production</noora-dropdown-item>
  <noora-dropdown-item value="staging" size="large">Staging</noora-dropdown-item>
</noora-inline-dropdown>

Items with icons

Pair choices with recognizable icons.

html

<noora-inline-dropdown label="View">
  <noora-dropdown-item value="grid" icon="layout_grid">Grid</noora-dropdown-item>
  <noora-dropdown-item value="list" icon="list">List</noora-dropdown-item>
</noora-inline-dropdown>

Secondary text

Add concise context beside each label.

html

<noora-inline-dropdown label="Branch">
  <noora-dropdown-item value="main" secondary-text="default">main</noora-dropdown-item>
  <noora-dropdown-item value="release" secondary-text="protected">release</noora-dropdown-item>
</noora-inline-dropdown>