Dropdown

The Dropdown component provides lightweight menu interactions using semantic custom elements.

Ignix Lite dropdowns support keyboard accessibility, semantic intents, ghost variants, and accessible menu navigation without external dependencies.

---

Intent Variants

Preview

Code

<ix-dropdown data-intent="primary">

  <button slot="trigger">
    Primary ▾
  </button>

  <ul slot="menu">
    <li><button>Dashboard</button></li>
    <li><button>Profile</button></li>
  </ul>

</ix-dropdown>

<ix-dropdown data-intent="success">

  <button slot="trigger">
    Success ▾
  </button>

  <ul slot="menu">
    <li><button>Saved</button></li>
    <li><button>Completed</button></li>
  </ul>

</ix-dropdown>

<ix-dropdown data-intent="warning">

  <button slot="trigger">
    Warning ▾
  </button>

  <ul slot="menu">
    <li><button>Pending</button></li>
    <li><button>Review</button></li>
  </ul>

</ix-dropdown>

<ix-dropdown data-intent="danger">

  <button slot="trigger">
    Danger ▾
  </button>

  <ul slot="menu">
    <li><button>Delete</button></li>
    <li><button>Remove</button></li>
  </ul>

</ix-dropdown>

---

Ghost Variant

Preview

Code

<ix-dropdown data-intent="ghost">

  <button slot="trigger">
    Ghost ▾
  </button>

  <ul slot="menu">

    <li>
      <button>Item One</button>
    </li>

    <li>
      <button>Item Two</button>
    </li>

  </ul>

</ix-dropdown>

---

Gradient Variant

Preview

Code

<ix-dropdown data-intent="gradient">

  <button slot="trigger">
    Gradient ▾
  </button>

  <ul slot="menu">

    <li>
      <button>Modern</button>
    </li>

    <li>
      <button>Premium</button>
    </li>

  </ul>

</ix-dropdown>

Usage

Preview

Workspace Actions

Manage workspace settings and quick actions.

Code

<div>

  <h4>
    Workspace Actions
  </h4>

  <p>
    Manage workspace settings and quick actions.
  </p>

  <ix-dropdown data-intent="primary">

    <button slot="trigger">
      Workspace ▾
    </button>

    <ul slot="menu">

      <li>
        <button>Settings</button>
      </li>

      <li>
        <button>Invite Members</button>
      </li>

      <li>
        <button>Billing</button>
      </li>

      <li>
        <button>Logout</button>
      </li>

    </ul>

  </ix-dropdown>

</div>

---

Attributes

Attribute	Type	Description
data-intent	'primary' | 'success' | 'warning' | 'danger' | 'ghost' | 'gradient'	Applies semantic styling
slot="trigger"	slot	Defines dropdown trigger
slot="menu"	slot	Defines dropdown menu