Combining icon style into items

[xakiy]

Hi, I wonder is there a simple way to add icon styling into these items links. I use vue-awesome but didn't know how to combine them, any suggestion to make the links look prettier, thanks.

[MisRob]

Hi,

I checked some options and I don't think there is a simple way right now. You could add icons to all links with something like

.NavigationItem::before {
  font-family: "Font Awesome 5 Brands";  content: "\f099";
}

but this is totally useless - I don't suppose anyone would like to use the same icon for everything :)

I was thinking about it more and I am considering the idea of adding new fields to source items: id and class.

Example of enhanced component API:

items: [
    { name: 'Products', children: [
        { name: 'Shoes', route: 'shoes', id: 'my-id' } 
    ]},
    { name: 'About', route: 'about', class: 'my-class', children: [
        { name: 'Contact', route: 'contact', children: [
            { name: 'E-mail', element: 'email' },
            { name: 'Phone', element: 'phone' }
        ]},
    ]},
    { name: 'Github', class: 'my-class', external: 'https://github.com' },
],

I think this could be usefull in general for adding some extra style only to a few selected links, right? Also you could add your icons with #my-id::before or .my-class::before.

Could this help you?

[xakiy]

Thanks for the reply. Yes, I think it's quite more work if we need to add manual id and class for the items. Why not provide generated id and class for every item in the tree and by adding them special prefix in in them so that it won't clash with other elements in the page.

Like, say: items: [ { name: 'Products', children: [ { name: 'Shoes', route: 'shoes' } ]}, { name: 'About', route: 'about', children: [ { name: 'Contact', route: 'contact', children: [ { name: 'E-mail', element: 'email' }, { name: 'Phone', element: 'phone' } ]}, ]}, { name: 'Github', external: 'https://github.com' }, ], will produce id="vue-tree-product" for "product" id="vue-tree-shoes" for "shoes", or id="vue-tree-product-shoes" for hierachical purpose (maybe)? based on their route names. So people can predict ids of their route links.

I think that what I can conceive.

[MisRob]

Hi, thank you.

Why not provide generated id and class for every item in the tree and by adding them special prefix in in them so that it won't clash with other elements in the page.

I get automatically assigned ids. But I am not sure about classes. Purpose of class in some use cases could be to provide a way how to simply style some custom group of menu items and we cannot predict which group it will be - this is something which library users will need to choose themselves sometimes.

So I suppose we could combine both solutions actually. There are already some automatically assigned classes (described here https://vue-tree-navigation.misrob.cz/#/styling) so I think we could assign these hierarchical classes too - something like TreeNavigation__product, TreeNavigation__product-shoes (not 100% sure about naming yet, just would like to stay consistent with what is there already- BEM). So these classes could be used instead of ids and users could guess their names easily how you propose.

And then there would be an option to add a custom class or custom id (optional, not required) to any menu item as proposed in a first comment so there would be a possibility to use id for some overrides or to use some custom classes.

Does it make sense?

[xakiy]

Yes, it does, and I couldn't agree more, that would be nice to be able to override the generated ids for more customizing purpose. And about classes having them generated automatically and overrideable is awesome. Can't wait when you implement it.

Sorry for my late reply..

[MisRob]

Ok, thanks.

I'm planning to release v4 so this will be probably included. Didn't have much time through holidays but will be back open-sourcing since the second half of September.

[MisRob]

I've decided to release v4.0.0 without this feature since 4.0.0 contains some updates which could be quite useful so I don't want to wait longer than needed for the new release. Will add this feature to 4.1.0.

[HamishMcDougall]

This would be a very useful feature

[MisRob]

It's first item on my to-do list :) Contributions are welcome!