# `LineaUI.Components.MenuList`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/menu_list.ex#L1)

LineOne's menu lists: a vertical list of links with one active entry.

    <.menu_list variant="solid">
      <:item navigate={~p"/start"} active>Getting start</:item>
      <:item navigate={~p"/shipping"}>Shipping</:item>
    </.menu_list>

An icon is the first child of an item; LineOne's icon colors (muted, darker on hover, current
color when active) come with it:

    <:item href="#"><svg class="size-5">…</svg><span>Payments</span></:item>

A trailing count (a badge, a number) goes in the `:count` slot of a `menu_item`, or in the
`count` attr of an `:item`; it is pushed to the end of the row:

    <.menu_item navigate="/inbox" variant="solid">
      <:icon><svg class="size-5">…</svg></:icon>
      Inbox
      <:count><.badge size="sm" shape="pill">12</.badge></:count>
    </.menu_item>

`variant` follows LineOne's examples: `link` (text only), `solid` (filled; `color` picks
primary or neutral), `pill` (rounded-full with a tinted hover), `gradient` and `bordered`.

Items that are not links take `on_select` (an event name or `%JS{}`), pushed with
`%{"value" => item_value}`:

    <.menu_list on_select="pick">
      <:item value="shipping">Shipping</:item>
    </.menu_list>

Streams render one `menu_item` per row:

    <.menu_list id="pages" rows={@streams.pages}>
      <:row :let={{_id, page}}>
        <.menu_item navigate={page.path} active={page.id == @current}>{page.title}</.menu_item>
      </:row>
    </.menu_list>

# `menu_item`

Renders one entry of a menu list as a link (`href`, `navigate`, `patch`) or, without one,
a link-styled button that pushes `on_select` with `%{"value" => value}`. Used alone or in
a `menu_list` `:row`.

    <.menu_item variant="solid" navigate={~p"/start"} active>Getting start</.menu_item>
    <.menu_item value="b" on_select="pick">Beta</.menu_item>

## Attributes

* `variant` (`:string`) - Defaults to `"link"`. Must be one of `"link"`, `"solid"`, `"pill"`, `"gradient"`, or `"bordered"`.
* `color` (`:string`) - Defaults to `"primary"`. Must be one of `"primary"`, or `"neutral"`.
* `active` (`:boolean`) - Defaults to `false`.
* `value` (`:string`) - Defaults to `nil`.
* `on_select` (`:any`) - An event name or `%JS{}` run on click. Defaults to `nil`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download", "replace"]`.
## Slots

* `icon` - Drawn before the text; an `<svg>` gets LineOne's icon size and colors.
* `count` - Pushed to the end of the row (a number, a badge).
* `inner_block` (required)

# `menu_list`

Renders the list. Items come from `:item` slots (each takes `href`/`navigate`/`patch`,
`active`, `value`, and any HTML attribute), or from `rows` with a `:row` slot.

`on_select` is pushed with `%{"value" => value}` when an item that has a `value` is clicked;
it goes to `target` when given; a `%JS{}` is executed instead.

    <.menu_list variant="pill" on_select="pick">
      <:item value="shipping" active={@tab == "shipping"}>Shipping</:item>
      <:item navigate={~p"/payments"}><svg class="size-5">…</svg><span>Payments</span></:item>
    </.menu_list>

    def handle_event("pick", %{"value" => value}, socket), do: {:noreply, assign(socket, tab: value)}

## Attributes

* `id` (`:string`) - Defaults to `nil`.
* `variant` (`:string`) - LineOne's menu list examples 1–2 (`link`), 3–4/7–8 (`solid`), 5–6 (`pill`), 9–10 (`gradient`), 11–12 (`bordered`). Defaults to `"link"`. Must be one of `"link"`, `"solid"`, `"pill"`, `"gradient"`, or `"bordered"`.
* `color` (`:string`) - The active item's color (LineOne's examples 7–8 are `neutral`). Defaults to `"primary"`. Must be one of `"primary"`, or `"neutral"`.
* `on_select` (`:any`) - Event name or `%JS{}`; pushed with `%{"value" => value}` by items with a `value`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` `on_select` goes to. Defaults to `nil`.
* `rows` (`:list`) - A list or a stream (`@streams.x`) rendered by `:row`. Defaults to `nil`.
* `row_id` (`:any`) - A function giving each row's DOM id (streams give it). Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `item` - Accepts attributes:

  * `href` (`:string`)
  * `navigate` (`:string`)
  * `patch` (`:string`)
  * `active` (`:boolean`)
  * `value` (`:string`)
  * `count` (`:string`) - Text pushed to the end of the row.
* `row` - Renders one row; takes the row (`{dom_id, item}` for a stream).

---

*Consult [api-reference.md](api-reference.md) for complete listing*