Question: is it possible to change icon in Action Menu?

[woile]

Hoi, I was wondering if it is possible to change the 3 vertical dots of the action-menu to something else, and how could I do it.

Thanks!

[coenkoopmans]

Hi @Woile, why would you like to do this? At first glance, it seems like consistency gets a boost by always showing the three vertical dots. What would you change it to? Is there a valid scenario?

[woile]

Hey! So I'm trying to build a "smart breadcrumb", by combining the breadcrumb with the action-menu, I'm not sure if using action-menu for this is correct, but it seems like the only component that fits my needs.

The idea is that you would be able to click in an icon and you should see related links there.

As an illustrative example, let's suppose we have Groups and Members, if you navigate to member Jon, I'd like my breadcrumb to look like this:

Home > Group Foo > Member Jon ˅

When you click on the ˅ you should see the action menu appearing showing other members.

[jordybulten]

I like your idea. Under normal circumstances, the dots should suffice. But it looks like a nice addition to make it possible to place the trigger on a different icon/element.

One way would be to add a different trigger class with another icon in the :before pseudo class. But then we again would have a pre selected number of icons.

Does anyone has another, more flexible approach?

[benmb1984]

Hi @Woile,

You can overwrite the content property .action-menu .action-menu__trigger::before. When using Sass you can use the UI icon variables.

.breadcrumb { 
  .action-menu .action-menu__trigger::before { 
    content: "$ui-chevron-down";
  }
}

If we get more requests for a custom trigger icon in the action menu we can look for a standardized solution.

[woile]

Thanks! Super cool!