LineaUI.Components.MenuList (linea_ui v0.1.1)

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>

Summary

Functions

menu_item(assigns)

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_list(assigns)

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.

Functions

menu_item(assigns)

<.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(assigns)

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