TailwindCSS anchor attributes like 'id' in Phoenix.HTML.Link?

Phoenix Forum Questions / Help
, ,
1

I’d like to translate this Tailwind CSS attributes in a href link:

<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>

The compiler accepts this:

<%= link "Settings-2", to: Routes.user_settings_path(@conn, :edit), class: "block px-4 py-2 text-sm text-gray-700" %>

How can I add these element attributes of the anchor?

role="menuitem" tabindex="-1" id="user-menu-item-1"

Thanks for your help.

1 Like
2

The docs for link/2 define the specific options, and they go on to note the following:

All other options are forwarded to the underlying <a> tag.

So you can include the additional attributes as options:

<%=
  link "Settings-2",
    to: Routes.user_settings_path(@conn, :edit),
    class: "block px-4 py-2 text-sm text-gray-700",
    role: "menuitem",
    tabindex: -1,
    id: "user-menu-item-1"
%>
4 Likes
3

Thanks a lot. I leared hat a space is needed between the colon and the value.