Corex · Elixir Phoenix Framework UI Library

Semantic colors, visual variants, density, and corner radius via modifier classes on the menu root.

Semantic

Use class="ui-{role}" to set the semantic palette of a menu.

Available options: accent, alert, brand, info, success

    <.menu class="menu" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Default</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-accent" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Accent</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-brand" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Brand</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-alert" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Alert</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-info" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Info</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-success" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Success</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Variant

Variant modifiers control menu surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.menu class="menu" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Subtle (default)</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Solid</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Ghost</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example menu ui-accent ui-solid.

    <.menu class="menu" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Base</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Base</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Base</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-accent" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Accent</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-accent ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Accent</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-accent ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Accent</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-alert" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Alert</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-alert ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Alert</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-alert ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Alert</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-brand" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Brand</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-brand ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Brand</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-brand ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Brand</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-info" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Info</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-info ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Info</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-info ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Info</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-success" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Success</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-success ui-solid" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Success</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-success ui-ghost" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Success</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Size

Use class="ui-size-{size}" to set the size of a menu.

Available options: xs, sm, md (default), lg, xl

    <.menu class="menu ui-size-sm" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>SM</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-size-md" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>MD</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-size-lg" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>LG</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-size-xl" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>XL</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a menu.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.menu class="menu ui-rounded-none" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>None</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-rounded-sm" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>SM</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-rounded-md" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>MD</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-rounded-lg" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>LG</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-rounded-xl" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>XL</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu ui-rounded-full" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Full</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Max height

Use class="max-h-{step}" to set the maximum height of a menu root.

Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (menu)

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.menu class="menu w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-9xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-8xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-7xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-6xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-5xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-4xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-3xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-2xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-xs w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-sm w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-md w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-lg w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-2xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-3xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-4xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-5xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-6xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-7xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-8xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

<.menu class="menu ui-max-height-9xl w-full" value="fra" items={[
      %Corex.Tree.Item{value: "fra", label: "France"},
      %Corex.Tree.Item{value: "bel", label: "Belgium"},
      %Corex.Tree.Item{value: "deu", label: "Germany"},
      %Corex.Tree.Item{value: "nld", label: "Netherlands"},
      %Corex.Tree.Item{value: "che", label: "Switzerland"},
      %Corex.Tree.Item{value: "aut", label: "Austria"},
      %Corex.Tree.Item{value: "ita", label: "Italy"},
      %Corex.Tree.Item{value: "esp", label: "Spain"},
      %Corex.Tree.Item{value: "prt", label: "Portugal"},
      %Corex.Tree.Item{value: "pol", label: "Poland"},
      %Corex.Tree.Item{value: "swe", label: "Sweden"},
      %Corex.Tree.Item{value: "nor", label: "Norway"},
      %Corex.Tree.Item{value: "dnk", label: "Denmark"},
      %Corex.Tree.Item{value: "fin", label: "Finland"},
      %Corex.Tree.Item{value: "irl", label: "Ireland"},
      %Corex.Tree.Item{value: "grc", label: "Greece"}
    ]}>
  <:trigger>Menu</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>