Inline Dropdown

Opens a compact inline menu.

InlineDropdown web component

Opens a compact inline menu.

Setup

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

Default

Use an inline menu for compact choices.

Newest

Oldest

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

Newest

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

Production

Staging

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

Grid

List

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

main

release

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

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`	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.
`default`	Declarative noora-dropdown-item children.

Styling parts

Name	Description
`trigger`	The menu trigger.
`content`	The menu content.

Behavior

Selections emit a `noora-select` event.